@eprev

My name’s Anton Eprev and I’m a web developer working as front-end engineer at Booking.com in Amsterdam, Netherlands. I’m on Twitter, GitHub and Unsplash.

Make as a front-end development build tool

Make is turning 40 in 2017.

This is a practical introduction to Make as a front-end development build tool. I will give the basic understanding of how makefiles work and show how to get the most common front-end tasks done using Make. However I encourage you to read the official manual through.

Why even bother with Make? Make is a powerful tool which is not limited to building packages. You can use it for anything you do from copying files or running webpack to deploying your project. I use this makefile to build and deploy this very web site. These are the tasks that it carries out for me:

  • Running Jekyll
  • Watching for changes in JavaScript source files
  • Building JavaScript bundles
  • Minifying static assets (CSS, JavaScript and HTML)
  • Versioning static assets
  • Deploying the web site to GitHub Pages

And that makefile is less than 80 lines of code!

Continue reading

How to detect if CSS transforms are supported on SVG

If you’re reading this, then apparently you already know that IE and Edge don’t support CSS transformations on SVG and neither apply CSS transitions. Moreover, SVG animations might not be an option, since Chrome deprecated SMIL in favor of CSS animations. How come? Probably you’re thinking now of using CSS when it’s available and falling back to SVG transform attribute.

Continue reading

The importance of HTML character encoding

W3C/WHATWG HTML5 specification states:

A character encoding declaration is required (…) even when all characters are in the ASCII range, because a character encoding is needed to process non-ASCII characters entered by the user in forms, in URLs generated by scripts, and so forth.

When the character encoding is not specified, the browser is left to determine the encoding before parsing the document. The user agent will search for character encoding declarations in the first 1024 bytes. Therefore, if you don’t set the encoding of the document neither in the Content-Type header nor using the META tag, the browser will have to wait for the first 1024 bytes and only then may attempt to auto-detect the character encoding or fallback to the user-specified default character encoding.

It’s important to specify a character set of the document as earlier as possible, otherwise the user agent will “idle” before it actually can start parsing HTML and loading other important resources (styles and scripts). This negatively impacts the page load time, especially on a slow connection or when the server flushes the early-head. The later can be completely meaningless when it’s under 1024 bytes and the character encoding of the document is not indicated.

Continue reading

What’s worth watching

What’s worth watching

  • Ben Maurer (Facebook) on “Web speed @ Facebook” (2016): shipping the page incrementally, packaging resources based on their usage patterns, early flushing, deferred dependencies, performance measurements, JavaScript’s lazy parsing.
  • Matthew Flaming (New Relic) on “Building a system that never stops” (2016): what challenges come with the scaling systems?
  • Pual Lewis (Google) on “High performance web user interfaces” (2016): applying RAIL (Response-Animation-Idle-Load) principles in practice.
  • Scott Jenson (Google) on “The Physical Web is a Speed Issue” (2015): there is no need to have a gazillion of apps installed on your smartphone in order to interact with things around you.
  • Guy Podjarny (Snyk) & Assaf Hefet (Snyk) on “Tracking Vulnerabilities in Your Third Party Code” (2015): these guys built a tool that helps you track and fix vulnerabilities in your Node.js application dependencies.

What’s worth watching

What’s worth watching

Archive