5minutenpause

5 Essential Tools for the Rails Web Developer — for Mac, Linux and Windows

| Comments

There are certainly many ways to develop Ruby on Rails applications. If you are still struggling to find your perfect workflow and keep questioning the tools you are using, let me guide you. Below I will share my set of tools for developing Ruby on Rails applications, as well as general frontend web development.

When you come to the last one, I am sure you will be surprised, because you are probably already using at least one of these tools.

Terminal

Mac

When it comes to a terminal I swear by iTerm. iTerm 2 gives you split windows and panes, it’s fast and you can configure it to work in almost any way you’d like.

Linux

If I am not on my Mac but on a Linux server, I always use tmux. If you want to get a crash course on tmux, please visit the Thoughtbot blog.

Windows

Readers running Windows machines should have a look at Babun. I haven’t used it, but it looks great. It comes with zsh and OhMyZsh preinstalled. Makes me almost want to install Windows to have a look at it.

Text Editor

My text editor of choice happens to be available for all three platforms.

Mac, Linux & Windows

Perhaps you know it already: Sublime Text. It is unbelievably easy to customize and there are really a huge amount of Plugins/Packages available. If you need some inspiration, visit Josh Earl.

Browser

My day-to-day browser and first-stop development choice is Google Chrome. It’s fast and offers pretty nice Extensions. Look out for a list of my Extensions in one of my next posts.

Mac, Linux & Windows

Of course Chrome is available for all three platforms as well. Just recently Mozilla released a new version of their browser, Firefox. It’s called Firefox Developer Edition. It offers many useful tools as well. Probably the best one is the WebIDE where you can simulate different portable devices and even use your connected iOS or Android device for debugging.

Stack Overflow & Web search engines

These aren’t as much of a tool as the others but I sometimes couldn’t do my job without them. Lately I started using DuckDuckGo as my main search engine. It integrates many StackOverflow answers right at the top, because these are often the most important ones. I kind of like that idea.

Github

I couldn’t live without Github. It ubiquitous. Nearly all developers use it for their code. I find great new projects there. I can use it to edit files on the go, when I don’t have my iPad or laptop with me. You can use it as a homepage for you projects without buying domain names and setting up a web server. I can use it to quickly participate in projects, just to propose small changes. I love it.

Your tools

Okay. So what did I miss? What extensions for Chrome or Plugins for SublimeText are you using? Let me know in the comments.

Thanks for reading.

Validations for File Upload with Rails

| Comments

File uploading with Rails is a topic that’s really hot for my readers. Mike asked the other day, how he could do validations for uploaded files.

There are certainly many ways and it really depends on your specific setup and what you would like to validate. So this can only be a small hint in a right direction:

Modify the controller’s response

When we try to create the file, the controller renders create.js.erb. The file could look like this before we validate.

1
2
3
4
5
6
7
<% if @upload.new_record? %>
  console.log('ERROR');
<% else %>
  if ($('h1') !== undefined) {
    $('h1').append("<%=j render partial: 'uploads/upload', locals: { upload: @upload } %>");
  }
<% end %>

If an Upload is invalid, the model will have error messages set. You can retrieve them by calling @upload.errors.full_messages. We just have to write them to the screen.

1
2
3
4
5
6
7
8
9
<% if @upload.new_record? %>
  <% if @upload.errors.any? %>
      $('form').prepend("<%=j render partial: 'shared/error_messages', locals: { error_messages: @upload.errors.full_messages } %>");
  <% end %>
<% else %>
  if ($('h1') !== undefined) {
    $('h1').append("<%=j render partial: 'uploads/upload', locals: { upload: @upload } %>");
  }
<% end %>

Perhaps we need to do this more often than for this one form. That’s why I use a shared partial _error_messages.js.erb. It looks like this.

1
2
3
4
5
6
7
8
9
10
<div id="error_explanation">
  <div class="alert alert-danger">
    The form contains <%= pluralize(error_messages.count, "error") %>.
  </div>
  <ul>
    <% error_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
  </ul>
</div>

So now, when you try to upload an invalid file, you will get your errors printed to the screen.

Thank you for reading.

Lets deploy on a Friday.

| Comments

Last Friday was meant as a wrap up day for our current project at work. We wanted to do quality assurance tasks, fix the last issues and go home early. Well, it didn’t work out like that.

A month ago I wrote about my debugging guidelines and best practices. This was a day were I should have sticked to the text. But it turned out different. Let me take you on a small journey through my last debugging adventure.

Everything worked in development. But what about production?

We have a Ruby on Rails application that serves a zip file. It includes several html files, zipped up together with the necessary assets. It’s consumed in a mobile application. Everything worked perfectly in development environment and I deployed the app. I was content that it should “just work”. The code was tested with an rspec test suite and the mobile app showed no problems.

Well you probably guessed it: Production environment chose to behave differently. Once deployed, the zip file couldn’t be downloaded.

Use JavaScript to change values inside your CSS files

| Comments

It’s a situation you probably know: You need to change some styling on your website after it is rendered.

Now you may want to use an additional css class for these elements. And that would be the right way to go in many cases. But perhaps the values you want to set in your stylesheet depend on a calculation you have to do after the DOM is ready. So you use JavaScript to set the inline styles. Knowing well, that inline styles are bad. But what can you do different?

Comprehensive guide to background processing with ActiveJob, DelayedJob and Rails 4.2

| Comments

When you have the multiple file upload feature finished there is one problem remaining: Rails is usually single-threaded. This implicates that only one process is running and this process is busy responding to web requests. If you upload one or many images the post-processing happens right after the upload finishes. This means that the server is busy processing images and cannot respond to any other requests in timely manner. The result is that your users have to wait for this processing to finish. During that time you can still click on links and try to navigate around the site, but it will be very slow and not a nice user experience at all. We have to do something about that!

A slider gallery that works with photos and inline videos

| Comments

Suppose you want to display a slider gallery on your website. After all it’s one of the most requested features clients have these days. Now suppose further, that you chose a third-party library for this, as you don’t want to code it by hand. It might be a nice exercise to do it all by yourself but please show me a client that actually pays for the time it takes you to do that. Then I’ll code you three different sliders. Promised.

Anyway. Your slider is all nice and works really well. Fast-forward three months. You get a call from your client. Everything fine. Except: She wants you to modify the slider so she can include videos in between the pictures. You begin to quietly laugh hysterically but she throws you a bone: It will just be Vimeo or YouTube videos. No custom video player necessary. (At least for now… You know how it goes… If you need a heads-up on html5 video that plays in every browser, I wrote a little about that)

But fear not brave frontend developer. Your brothers and sisters have a solution to fight the dark hordes of feature requests: Fotorama.io slider. I have to admit, I always want to write futurama.io. That would read even better, I’d say. ;-)

So let me give you a little intro to this slider. There will be two examples, one HTML only example and one where I include the slider in a Rails 4.2 project. Yeah we are that bleeding edge over here. ;-)

Listen to the (bug) people

| Comments

The Bug

The other day I had a weird bug happening: We had a responsive website with a dropdown menu on phones. Usually everything worked alright. Sometimes the menu wouldn’t show, though. This happened mostly on Android phones, the testers said. Of course we had to fix this as a menu just has to work no matter the device.

The debugging

So how do you track something like this? You start by reliably reproducing the bug. You want to have a set of steps that always lead to this bug happening. This means it’s a deterministic problem and you have a valid chance of fixing it.
When you try to reproduce it take notes on what is happening. Make sure to write your notes without making assumptions. At this point in the debugging process it’s not your job to find a solution or reason for the bug. At this point it is your job to note the behaviour and trying to describe the bug in detail and all the side effects you are noticing.

This is what we found:

Please ignore everything

| Comments

The other week I went on vacation with my family. We flew to Switzerland and had a really great time. I took the big camera to make gorgeous shots of my wife, my baby daughter and the Alps. The iPhone camera is great but pales in comparison to a professional camera. As I am no great photographer you can see this in every shot. But still, the pictures I made with the DSLR are just better. When using a big camera I always try to take more time for the composition of the shot. I use the lens, different focus spots and depth of field way more than when shooting with my phone.

Because my photography skills still lack, I try to read articles from professional photographers to get ideas and tips on how to improve. An article that made me think was about a photo-marathon in Munich (in German). A photo-marathon is a one day event. You get multiple themes and have limited time to find a suitable picture for each. One thing I noticed was the photographer who wrote the article made sure to have a distinct visual language present in every photo he took: He cared for a hard horizontal line in the lower third of the image and wanted to only take pictures of architecture. His skills are on a very different level than mine but we both took the time and tried to think about what we want to show in our photographs and how to frame it. You could call it a style or a handwriting that your images show.

That made me wonder: When was the last time I really thought about my coding style and handwriting?

A Gruntfile for frontend developers

| Comments

If I do any frontend development I want to make sure I can concentrate on the important things. Things like writing Sass, HTML or Javascript. I don’t want to spend time on basic stuff like copying files or making sure my Javascript files have a semicolon on every line. This is were task runners or build tools come into play. There are quite a few too choose from. My current frontend workflow is based on Grunt tasks. If you are still getting started with Grunt, or just never took the time to set it up, here are my tasks. Use them if you like and please let me know if there are things I could do better or if there are any questions.

Comprehensive guide to deploying Rails applications with Mina

| Comments

I have this small SaaS web application. It has no homepage and it has no signup form or signup site. It has no marketing campaign and people only hear about it from current users. I manually onboard new users and show them around, personally. From face to face. To put it short: “I do things that don’t scale”.
The people using my software depend on it for its purpose, though. They earn real money using it and they are serious about it. They have feature requests and get annoyed when something doesn’t work — for good reason. That’s why whenever I develop a new feature or roll out a security update or fix a bug, it is really important that I don’t mess things up. It is okay to have a few minutes of downtime when the app restarts, there is no need for deployments with zero downtime. But other than that, the software and all things the users got comfortable using should work as intended.

To achieve this there are a few things in place that make this easier for me. Let me tell you about them.