Binary Solo
My name's Ayush. I'm a freelance web developer and I run Chapter24 on the side. I'm also on the core team of the Bridgetown open source project.

I mainly write about web development using "boring" tech like Ruby on Rails, HTML and CSS; with the occasional musing about product design thrown in.

I'm on Twitter @ayushn21.

000001000001100001110000111






Details & Summary tags: HTML's best kept secret
<details> and <summary> tags are among of the most useful tags that HTML gives us. I'm constantly surprised by how esoteric they are in practice.

In its simplest use case, the <details> tag gives us an "open/close" toggle control that shows the contents of the <summary> tag when closed; and all its contents when openend by clicking on it.


<details>
  <summary>Steven Wilson</summary>
  Steven John Wilson is an English musician, singer, songwriter and record producer. Currently a solo artist, he was the founder, guitarist, lead vocalist and songwriter of the band Porcupine Tree, as well as being a
Converting HTML to PDF using Rails
Exporting to PDF from HTML can be a bit of a can of worms, especially with CSS not quite working the way it does in a web browser. However with the right setup, it's possible to take the pain out of it!

A couple of popular gems to convert HTML to PDF in Rails are PDFKit and WickedPDF. They both use a command line utility called wkhtmltopdf under the hood; which uses WebKit to render a PDF from HTML.

I'd highly advise against using both those gems. They're good libraries but the underlying wkhtmltopdf doesn't support modern CSS features such…
Bridgetown's new webpack CLI tool
Bridgetown v0.21 includes a new CLI tool to manage Webpack so any improvements and updates to the Webpack config in later Bridgetown versions can be applied easily. 

# To view all available options
bundle exec bridgetown webpack
 
To avoid hiding a default webpack config in a gem or npm package; the config was split into two files: config/webpack.defaults.js and webpack.config.js.

webpack.defaults.js contains the base Webpack configuration provided by Bridgetown. webpack.config.js just requires webpack.defaults.js and re-exports it; allowing any user additions or overrides to be made before it's exported.

If you've already got a Bridgetown site, you can…
Applying monkey patches in Rails
Monkey patching is one of Ruby's most powerful features. It allows programmers to add methods to core classes which can result in some very elegant APIs. However it's quite easy to shoot yourself in the foot if you don't know what you're doing.

This post from Justin Weiss is a brilliant guide on how to monkey patch responsibly. However he doesn't describe how to actually include your monkey patches in a Rails app, so that's what I'm going to describe in this post.

Following Justin's advice, the implementation of all our monkey patches should go in the lib/core_extensions directory. So…
Ruby's quirky load order for mixins
Ruby modules are a great way to define mixins. This construct offers a way to share logic using composition.

As it is usually the case with Ruby, there's two ways of mixing (or includeing) ruby modules into your class:


class Post
  include Categorizable
  include Copyable
end
 
OR

 
class Post
  include Categorizable, Copyable
end
 
At first glance you might think those two syntax are identical, but Ruby has a quirk that isn't immediately obvious. To demonstrate this, let's print out a line from those two module when they're included:

 
module Categorizable
  def self.included(base)
    puts
How to submit an array using a Rails form
Sometimes an array of data needs to be submitted in an HTML form. A form to send invites to a bunch of users for example. That'd just be a series of email fields; and in the controller; we'd want an array of the emails to iterate over and send invites.

Rails form helpers are set up to have a key and value for each field, so it's not immediately obvious how to send an array of data. But in Rails, there's always a way!

If we append [] to the name of a field, it'll be parsed as an array…
Defining Rails application cron jobs in a rake task
rake has a variety of uses in Rails applications. You can use them to define and run installation and setup scripts, deployment scripts and pretty much anything you'd want to execute from the command line.

In Chapter24, I use a rake task that calls a Cloud66 HTTP endpoint to trigger a deploy.

namespace :chapter24 do
  task :deploy do
    key = Rails.application.credentials.cloud66[:deploy]
    exec "curl -X POST https://hooks.cloud66.com/stacks/redeploy/#{key} && echo \n"
  end
end
 
Additionally, I find they're also brilliant for defining cron jobs for your application. Instead of invoking…
A pjax powered HTML tab selector
pjax has got to be one of the most underrated programming techniques on the modern web. You can get a sizeable performance boost and dynamic page interactions by just dropping in a pjax library and not writing any JavaScript yourself.

Turbolinks and its recent successor Turbo Drive both leverage the pjax concept to allow multi-page apps to operate like single-page apps (SPAs) with little to no custom JavaScript.

The number of use cases in which you can use pjax instead of writing custom JavaScript is astounding. I recently revamped my portfolio website. As part of the revamp, I wanted to…
Toast notifications using a JavaScript custom element
Toast notifications are a great way to give the user ephemeral, unobtrusive feedback about an action they have just carried out.

Twitter uses them in response to a lot of actions such as posting a new tweet or deleting a tweet. HEY also uses them to confirm email categorisation actions among other things.




A plethora of applications (including my app, Chapter24!) use Toasts in a variety of ways and these are just a couple of examples I could recall off the top of my head. In…
How I organise my project-specific plugin code in Bridgetown
As I covered in my last post, Bridgetown is a new static site generator that's been forked from Jekyll. It includes Webpack as a first class citizen so it's all set up to allow developers to build modern front ends without any extra configuration.

For most simple websites, you're unlikely to need any custom Ruby code as Bridgetown packs in quite a bit of functionality out of the box; but for anything non-trivial; it's very likely you'll have to extend Bridgetown with plugins.

In my last project, I wanted to showcase some of my photography along with the technical data…
A static HTML website starter template using Bridgetown
Static HTML websites are incredibly popular these days. They're unparalleled in performance as you can serve them via CDNs which are blazing fast. Also they're incredibly easy to deploy thanks to services like Netlify.

To build static websites with changeable content and without repeating code requires the use of a static site generator.

There's quite a few popular generators; but being a Rubyist, I've used Jekyll for a number of websites. While it's awesome; I thought it was a bit out of date as it does not integrate Webpack by default. Anyone who's looked at a webpack.config.js knows that hitting…
The usefulness of Wheaton's Law in product design
Software product design these days is becoming more and more driven by metrics. A side effect of that is products are becoming largely homogenous. The recent release of Fleet by Twitter is a case in point. Companies are focused on making some graph or other go higher and higher instead of building cohesive and engaging user experiences.

This obsession with metrics often leads to experiences that are egregiously user hostile. Wheaton's Law is an implicit or explicit prerequisite for working at most software companies; however very few seem to apply it to their product design as well.

In this post…
Demystifying cookies in Rails 6
Cookies are used in pretty much every modern web application. They're used for various purposes such as facilitating user authentication and storing user preferences. Since they're so widely used it's no surprise that a full-stack development framework like Rails has a simple and convenient API to manage them.

In this post I'll describe the different types of cookies supported by Ruby on Rails and how they work under the hood.


Types of Cookies in Rails


Rails supports the storage of 3 kinds of cookies:

  • Plain text: These cookies can be viewed and changed by a user.

  • Signed: Signed…
How Chapter24 works under the hood
Chapter24 is a super simple to use blogging platform. I built it and am running myself without any collaborators. That meant I needed a tech stack and architecture that made it quick to build and easy to run as a solo endeavour.

Tech stack and high level architecture


At its core, Chapter24 is a Ruby on Rails monolith that runs on a single $5/month DigitalOcean box. In keeping with the Rails philosophy, I'm using server side HTML rendering with Turbolinks and Stimulus on the front end. I've got Sidekiq for running background jobs and my database is a DigitalOcean managed…
Web designers, please stop punching your users in the face
Modern web design has many flaws; however it's truly mind boggling how many websites are positively user hostile with subscription popups.

It happens way too often; I load a web page or I'm scrolling down one and I get a punch in a face with a modal that says "SUBSCRIBE TO ME! I DEMAND YOUR EMAIL ADDRESS!". I have literally no idea how or why this technique even works (assuming it does work); especially when the copy is passive aggressive. All it makes me want to do is close the window.

Why a developer or designer would want…
Avoiding session replay attacks in Rails
There are a lot of good reasons to roll your own authentication rather than use something off the shelf like Devise. This comes with its own pitfalls and a rather easy mistake to make is to leave a vulnerability for session replay attacks by solely using the "user id" as an authentication instrument. 

In this post I'll describe how such an attack can be carried out; why it's so serious and how to protect your app against it. 


A typical login mechanism


A common pattern for Rails authentication is to have a SessionsController with a create action for login and…

Subscribe to Binary Solo


We'll send you an email every time a new post is published. We'll never spam you or sell your email address to third parties. Check out our privacy policy for details.