I found a great article on sorting bootstrap tables without any gems or additional libraries. Check it out here.
While it’s not related to programming, editing images is an activity that I encounter when creating my front end.
Photoshop is great, but sometimes I find other software easier.
Lunapic’s Color Change is awesome if you have a color that you want to replace in an image. All you have to do it select the color you want to use in the image and then click on the color (in the image) you want replaced. Voila!
Pic Monkey makes it super easy to convert an image into another shape. My typical use case is changing an image into a circle shape (cropping the corners). To do this, you just click: Frames > Shape Cutouts > [circle icon].
If you’re looking for additional functionality, similar to Photoshop, I recommend Pixlr (use on the internet) or Fire Alpaca (download and use locally).
I’m using Bootstrap with Rails, but I wanted to replace their alerts with growl messages. Luckily, I found this JS made by Robert McIntosh. Bootstrap-notify makes it so easy to turn your flash messages into growl messages.
- Download the JS https://github.com/mouse0270/bootstrap-notify
- Add this line to application.js: //= require bootstrap-notify.min
- Download Animate.css and put in your assets/stylesheets folder (add it to application.css, if you aren’t adding the CSS tree)
- Create a flash partial (layouts/_flash.html.erb) – change the options to customize:
<% flash.each do |type, message| %>
enter: ‘animated bounce’,
exit: ‘animated bounce’
<% end %>
6. Put this in application_helper.rb:
“success” # Green
“danger” # Red
“warning” # Yellow
“info” # Blue
7. Render the partial by adding this to “layouts/application.html.erb”:
<%= render “layouts/flash” %>
You should be all set!
My image tags were right for Open Graph, but my images weren’t showing when when people tried to share on Facebook.
I found my answer on Stack Overflow here.
Apparently, if Facebook doesn’t already know of a page, it will not know about the image until after it is shared once (at which time it becomes aware of the page).
However, there’s a work around. You have to specify additional attributes about the image – the height and the width (where the content value is the number of pixels for width and height, respectively):
<meta property=”og:image:width” content=”450″/>
<meta property=”og:image:height” content=”298″/>
I had to find the URL of Paperclip images in order to use them in meta tags. This is what I ended up doing (where User is the model and image the attachment name):