View

Using local fonts with Webpack / Webpacker

When we want to use our own (or bought) fonts in an application with Webpack(er), we have two options. We can

  • put the fonts directly into your Webpack's assets folder or
  • write an npm package with an own sass file that can be imported from the Webpack manifest.

Load fonts from your assets folder

The first option turns out to be straightforward: Import the stylesheets in the index.js of the pack you're using:

```javascript
// webpack_source_path/application/index.js

import './stylesheets/reset'
import…

Repeats

How to tackle complex refactorings in big projects

Sometimes huge refactorings or refactoring of core concepts of your application are necessary for being able to meet new requirements or to keep your application maintainable on the long run. Here are some thoughts about how to approach such challenges.

Break it down

Try to break your refactoring down in different parts. Try to make tests green for each part of your refactoring as soon as possible and only move to the next big part if your tests are fixed. It's not a good idea to work for weeks or months and wait for ALL puzzle pieces to…

Upgrade guide for moving a Rails app from Webpack 3 to Webpack 4

Webpacker is Rails' way of integrating Webpack, and version 4 has been released just a few days ago, allowing us to use Webpack 4.

I successfully upgraded an existing real-world Webpack 3 application. Below are notes on everything that I encountered.
Note that we prefer not using the Rails asset pipeline at all and serving all assets through Webpack for the sake of consistency.

Preparations

  • Remove version locks in Gemfile for webpacker
  • Remove version locks in package.json for webpack and webpack-dev-server
  • Install by ca…
Repeats

Simple database lock for MySQL

Note: For PostgreSQL you should use an alternative that doesn't require a database table. For MySQL we still recommend the solution in this card.


If you need to synchronize multiple rails processes, you need some shared resource that can be used as a mutex. One option is to simply use your existing (MySQL) database.

The attached code provides a database-based mutex for MySQL. You use it by simply calling

Lock....
Linked contentRepeats

Rails 4 introduced collection_check_boxes

Starting from Rails 4.0, you can use a special form options helper called #collection_check_boxes. It behaves similar to #collection_select, but instead of a single select field it renders a checkbox and a label for each item in the collection.

= form_for @post do |form|
  = form.collection_check_boxes :author_ids, Author.all, :id, :name_with_initial

How generated form params look like ———————————…

Linked content

How to drop all tables in PostgreSQL

To remove all tables from a database (but keep the database itself), you have two options.

Option 1: Drop the entire schema

You will need to re-create the schema and its permissions. This is usually good enough for development machines only.

DROP SCHEMA public CASCADE;
CREATE SCHEMA public;

GRANT ALL ON SCHEMA public TO postgres;
GRANT ALL ON SCHEMA public TO public;

Applications usually use the "public" schema. You may encounter other schema names when working with a (legacy) application's database.

Note that f…

Rails: How to send a test mail directly from the console

I use this Code Snippet quite often to debug issues with mails on staging and production servers. It allows you to send a custom mail directly from the console.

ActionMailer::Base.mail(
  from: "system@example.com", 
  to: "user@example.com",  
  subject: "Test mail from #{Rails.application.class}", 
  body: "This is just a test."
).deliver_now
Repeats

Using ES6 without a transpiler

If your app does not need to support IE11, you can use most ES6 features without a build step. Just deliver your plain JavaScript without transpilation through Babel or TypeScript, and modern browsers will run them natively.

Features supported by all modern browsers include:

  • fat arrow functions (() => { expr })
  • let / const
  • class
  • async / await
  • Promises
  • Generators
  • Symbols
  • Rest arguments (...args)
  • Destructuring

You won't be able to use import and export, or use npm modules.

See this [ES6 compatibility mat…

Repeats

Gatekeeping: Guide for developer

Note: This process is tailored to our specific needs and tools at makandra. While it will certainly not apply to all (especially larger teams), we think it is a helpful starting point. Compare also the Gatekeeping: Guide for gatekeeper card.


In order to reduce the number of rejects we get from clients, we want to review all code written before it goes to the staging server.

If your project manager wants to do gatekeeping o…

Upgrading Ruby from 1.8.7 to 2.3.5

Suggested Workflow

Set the ruby version in .ruby-version to 2.3.5, then perform these steps one by one, fixing errors as they occur:

1) Update gems as listed below, and bundle
2) Boot a Rails console - see below for a list of changes you will probably need
3) Run Specs with --backtrace option
4) Run Cucumber features (with Geordi's --debug option)
5) When all tests are green, look through your Gemfile and remove as many version constraints as possible.
6) Boot the application in different environements to spot further issues, e…

Repeats

Capistrano: Speeding up Sprockets' asset compile during deploy

Remember How to skip Sprockets asset compile during Capistrano deployment and Automatically skipping asset compilation when assets have not changed? Turns out there is an even better way to speed up Capistrano deployments with asset compilation – and it's even simpler.

Adding the Sprockets cache directory to shared directories

Sprockets is the library behind Rails' asset pipeline. It keeps a cache of already compiled files, so when a single file changes, it only needs to rebuild that one. This is …

Linked contentRepeats

Geordi hints

Reminder of what you can do with Geordi.

Note: If you alias Geordi to something short like g, running commands gets much faster!
Note: You only need to type the first letters of a command to run it, e.g. geordi dep will run the deploy command.

geordi deploy
Guided deployment, including push, merge, switch branches. Does nothing without confirmation.
geordi capistrano
Run something for all Capistrano environments, e.g. geordi cap deploy
geordi setup -t -d staging
When you just cloned a n…

Make ActionMailer use the current request host and protocol for URL generation

When you generate a URL in a mailer view, ActionMailer will raise an error unless you previously configured it which hostname to use. Configuring the correct hostname is quite annoying when you have multiple deployment targets with different hostnames, e.g. a staging server and a production server.

Using the hack below you don't need to configure a default hostname for your mailers. They will always use the hostname for the current request:

class ApplicationController < ActionController::Base

  before_filter :make_action_maile...
Deprecated

Live CSS / view reloading

Next time you have to do more than trivial CSS changes on a project, you probably want to have live CSS reloading, so every time you safe your css, the browser updates automatically. It's pretty easy to set up and will safe you a lot of time in the long run. It will also instantly reload changes to your html views.

Simply follow the instructions below, taken from blog.55minutes.com.

Install CSS live reload (only once per project)

  1. Add th…

How to upgrade Rails: Workflow advice

When upgrading Rails versions – especially major versions – you will run into a lot of unique issues, depending on the exact version, and depending on your app.

However, it is still possible to give some generic advice on how you want to tackle the update in principle.

How many update steps?

Besides the Rails upgrade itself, you might also want to

  • upgrade your other gems
  • upgrade your Ruby versions

First decide in how many steps you want to run the upgrade. I suggest

  • To do a separate step for each major rails versions. So, if…

How to: Use Ace editor in a Webpack project

The Ace editor is a great enhancement when you want users to supply some kind of code (HTML, JavaScript, Ruby, etc).
It offers syntax highlighting and some neat features like auto-indenting.

Integrating it with Webpack as described in the documentation – by using ace-builds and ace-builds/webpack-resolver – failed pretty hard for me. Maybe because Rails' Webpacker is still on Webpack 2.
The following works for Ruby on Rails with Webpacker / Webpack 2.

  1. Do not use the `ace-builds…
Repeats

Let the browser choose the protocol

Use protocol independent URLs whenever possible so that the browser will choose the protocol related to the protocol which the page is delivered with.

Example issues

  • When your page is delivered via https and you provide a youtube video only via http the most browsers (e.g. Firefox, Chrome) won't display the video.
  • When you deliver your youtube video via https://youtu.be/jyElDp98HdI your test which checks that the embeded video is rendered in the view will fail because your test server doesn't use https

Solution

Let your lin…

Linked content

Katapult 0.5.0 released

New Features

  • Deployment ready for Opscomplete
  • Copying view and controller templates over to target application during
    basics configuration or via new command katapult templates.
  • "Usage" section in README rewritten: Now describes two usage scenarios.

Improvements

  • Generating a fixed Gemfile.lock. Run bundle update after code generation to
    update all gems to recent versions.
  • Better deployment with Webpack
  • Navigation only rendered if requested
  • Some minor fixes
This website uses cookies to improve usability and analyze traffic.
Accept or learn more