This is a follow up post to this post in which I promised to post my solution to handling thumbnails when different reviewers submit different aspect ratio images, e.g…
Well, here it is..
for f in *.jpg; do convert "$f" -resize "576x324^" -gravity center -crop 576x324+0+0 +repage "${f%%.jpg}t.jpg"; done
This command does the following things:
Resizes the image as close to 576×324 as possible based on the smallest fitting dimension (indicated by the ^).
Sets the ‘gravity’ to the centre for the next command.
Takes a central crop of the image (central due to previous command) to the size 576×324. The x and y offsets give the location of the top left corner of the cropped image with respect to the original. 0 and 0 in this case.
Repage which removes image data to do with virtual image location. I’ve added this simply because the documentation recommends doing so as a pre-caution when using the crop command.
Sidekiq is a background task processor, similar to Cron, but for Ruby. All you need to do is write the tasks method and tell Sidekiq to execute it asynchronously. Sidekiq also comes with a decent dashboard, these screenshots are from the Gamely Digests Discourse Sidekiq.
Capistrano extends the Rake DSL to provide ways to run scripts on servers. It’s main usage is for deploying apps onto servers. On jotter.io and data.gg I have it set up so running this command…
cap production deploy
will upload the latest version to my server, run any migrations and restart the app on the server. I can also deploy a staging version or rollback to the previous version if something goes wrong.
On the server the directory structure looks like this…
/path/to/app/current/ (symbolic link to the very latest release in the releases folder)
/path/to/app/releases/ (contains the last couple of releases)
/path/to/app/repo/ (git repository)
/path/to/app/shared/ (has things like pids, logs, etc.)
Devise is user authentication for Rails. Devise will setup all the parts necessary for users to register, login, reset passwords, etc. If you know your project needs use logins, Devise is a no-brainer. You’re always going to want to modify the way the forms look so Devise provides a command to generate all the views for you to change. For everything else, Devise has a massive ‘How-to’ section on their Wiki.
Simple Form is a tool to help you make forms in Rails. Rails comes with its own way to do forms but I’ve never been happy with it. Simple Form is very similar for the basics.
Simple Form really shines for me when it comes to associations and configuration. Associations can be done as simply as this…
<%= simple_form_for @user do |f| %>
<%= f.input :email %>
<%= f.association :app_acount %>
<% end %>
Part of the install process adds some configuration files allowing you to set the input types, internationalization, what classes to apply to what components by default, priority countries in country picker drop-downs and much more.
One of the my targets for Gamely Digest is that it is kept simple and pain-free to maintain. For the first few reviews, I had to manually create thumbnails, rename and convert 50 images in GIMP. This drove me to write some bash scripts to automate the process.
The first script loops over every file in the current directory and renames it to gamename_X.jpg (X being a number from 1 to the total count of the files in the directory). Below is an example of the scripts execution.
ls | cat -n | while read n f; do mv "$f" "gamename_$n.jpg"; done
Before
2015-01-01-dreamfall.jpg
2015-01-01-dreamfall1.jpg
2015-01-01-dreamfall2.jpg
Command
ls | cat -n | while read n f; do mv "$f" "dreamfall_$n.jpg"; done
After
dreamfall_1.jpg
dreamfall_2.jpg
dreamfall_3.jpg
The next script uses Image Magick which is a fantastic library and toolset to create, edit, compose and convert images. Image Magick is a huge subject and outside the scope of this article but the command I’ve used below is very basic.
This one loops over every JPG file in the current directory, uses the Image Magick convert command to resize the image to 30% of its original size and appends a ‘t’ (t for thumbnail) to the end of the filename.
for f in *.jpg; do convert "$f" -resize 30% "${f%%.jpg}t.jpg"; done
Before
dreamfall_1.jpg
dreamfall_2.jpg
dreamfall_3.jpg
Command
for f in *.jpg; do convert "$f" -resize 30% "${f%%.jpg}t.jpg"; done
After
dreamfall_1.jpg
dreamfall_1t.jpg
dreamfall_2.jpg
dreamfall_2t.jpg
dreamfall_3.jpg
dreamfall_3t.jpg
My next job to tackle is reviewers submitting different size images causing reviews not to line up.
The expanded images can continue to have a different size but thumbnails need to be consistent. I plan on tackling this by using ImageMagick to remove pixels from the edges so we end up with a consistent thumbnail size. I’ll post my solution to this at a later late.
Recently I’ve been gathering data from gov.gg census reports as far back as 1971 for data.gg. The earlier census reports are scanned and the later ones have been created electronically but don’t copy and paste correctly. By the end of manually copying the data from the first table I knew I’d have to find a better way. After a bit of searching I found Tesseract, an OCR (Optical Character Recognition) tool. OCR tools take an image and attempt to convert any text it finds in the image into usable text. Google has even had a hand in Tesseract.
Tesseract is extremely easy to use. All you need to do is give it the image and an output file.
tesseract myscan.png out
There are plenty of other options available to optimise for your particular situation and even multiple languages supported. For me Tesseract worked perfectly except for the occasional 3 and 8 getting mixed up. Here is an example I created earlier…
We started Gamely Digest in 2013 to make a more digestible way to follow video games. The older I get the less time I have to play games and deciding what is worth playing is time consuming in itself.
When I was younger I noticed something similar with hardware. Once I took up software development I had less and less time to keep up with hardware components. Nowadays, I still build computers from components but do research at the time of purchase. I am extremely grateful for hardware sites that do guides on what to buy, they have save me so much time and effort. I want to do something similar for video games.
Before I’d even written a line of code, I knew Gamely Digest needed to be simple to maintain, static (no databases) and fast. Having used Jekyll previously, I used that. Jekyll is a static site generator. Instead of using a database, you create content using Markdown and Liquid templates. Jekyll generates the site into a folder, ready to be uploaded straight to your web server.
For example, if I was to use HTML to generate the reviews page, it would look something like this:
<h1>Post #1</h1>
Post #1 text, blah, blah, etc.
<h1>Post #2</h1>
Post #2 text, blah, blah, etc.
<h1>Post #3</h1>
Post #3 text, blah, blah, etc.
<h1>Post #4</h1>
Post #4 text, blah, blah, etc.
Using Jekyll, I just write this:
{% raw %}{% for post in site.posts %}
<h1>{{ post.title }}</h1>
{{ post.summary }}
{% endfor %}{% endraw %}
Behind the scenes, I have a folder called ‘_posts’ and Jekyll knows to find the posts for the loop in there. Each post has things associated with it such as title, date, layout, author, etc. Once the site has been built using Jekyll, you get the same HTML as above.
Reviews have improved a great deal since the release. Initially I had some of the layout, repeated inline image code and adsense code in there. This was becoming too time consuming to maintain. Now, I’ve extracted the adsense and inline image code into the Jekyll ‘_includes’ folder. Includes can also have parameters, allowing me to pass the filenames of inline images.
{% include image_inline.html img1=first_image img2=second_image %}
The difficultly was the sidebar images, I needed to be able to pick the images that go inline in the review and the order they appear in the sidebar. In the end I have come up with a quite elegant solution to minimize repetition. Integers are the naming convention for images on Gamely Digest. Reviews only ever use JPG images so the extension is assumed.
In the front matter I am creating an array containing the names of the images in the order they should appear in the sidebar. Front matter is an the area between the two triple-dashed lines in which you can set predefined variables or create and set custom variables. I use this area for things like twitter slugs, authors, excerpts, dates, titles, etc. ‘layout’ is a predefined variable telling Jekyll what layout file to use for the page.
The review layout is used by all reviews and uses the ‘sidebar-image-order’ variable to loop and select the images for the sidebar.
Using this system I can copy and paste the reviews from our shared storage directly into the post file leaving me to set the sidebar image order, place an adsense advert in an appropriate place and place inline images in the article.
Sometimes you do still need a databases but for simple things like personal sites, blogs, business sites and product homepages Jekyll is an excellent choice. Once upon a time you would use WordPress for your blog because of its facility to comment on posts but with products like Disqus and Discourse, you don’t always have to use WordPress. Of course Jekyll does have some downsides, it requires Ruby to be installed and for non-technical users, it is not as simple as logging in and using a What You See Is What You Get (WYSIWYG) editor to create content.
