Posted on

Using an SVG grid background for aligning elements in web page

One of the recurring annoyances when designing websites is ensuring alignment of elements on a web page.

Most design applications have the provision of an overlay grid. With very little effort we can add a simple grid to any web page and use it to ensure alignment of elements.

As illustrated in this codepen we can create a grid using a few lines of SVG:

We can use an extension like stylish and save this snippet to apply the above css grid as a background image to html.

So now whenever we activate this style and add grid-backdrop-enabled to html, the grid will show up as a backdrop against the transparent body and we can use it to check for alignment issues.

We can always adjust the SVG to tweak the appearance of the grid. Here is a slightly adapted one which highlights 5px, 10px, 50px and 100px boundaries with different colors:

Posted on

Exposing slots in layout containers through shared refs in React

React refs are generally considered an anti-pattern as their usage typically encourages patterns which go against declarative compositon and top down flow of data.

This post explores a somewhat uncommon use case where refs can be used to expose layout slots in parent components to nested components.

Continue reading Exposing slots in layout containers through shared refs in React

Posted on

Fable+F# vs ReasonML | Hacker News

I like F# and believe the author has done an amazing job evolving a functional language on the dot net platform but there are simply too many design choices in F# geared around C# compatibility and limitations of CLR being an object oriented language that when you switch to a different compilation target, these language aspects begin to look like bizarre warts.

Continue reading Fable+F# vs ReasonML | Hacker News

Posted on

ReasonML vs TypeScript – First impressions

This post summarizes preliminary observations while comparing ReasonML and TypeScript during selection of a reasonably (pun-intended) type safe language for frontend development. The observations here are somewhat biased in favor of experienced javascript developers and focusses primarily on frontend development workflow and does not take into account the (primary) native backend of Reason.

While this post primarily compares Reason and TypeScript, much of what is outlined about TypeScript equally applies to flow as well.

Continue reading ReasonML vs TypeScript – First impressions

Posted on

Decoupling your frontend development with gulp and http-proxy

In past developers have often relied on backend-specific toolchains for web application frontends. Some examples would be Rails asset pipeline or the legacy ant based toolchain for YUI. However recently node.js based tooling support for frontend technologies has significantly evolved and it is quite viable to use a node.js based toolchain for managing your frontend projects, even if the backend is not node.js, thus keeping the workflow decoupled from the backend.