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.

Deliver search-friendly web applications

In their “Deliver search-friendly JavaScript-powered websites” presentation at Google I/O 2018, Tom Greenaway and John Mueller shared details on how Google’s search crawler works and talked about the best practicies to build indexable sites and web applications.

  • There are over 130 trillon (10¹²) documents on the web (as of Jully 2016).
  • Googlebot no longer crawls hashbang URLs.
  • The rendering of JavaScript websites in Google is deferred untill resources become available to process the content.
  • It is recommended to detect Googlebot on the server by user-agent string and send a complete “dynamically rendered” HTML document back.
  • There are tools available for dynamic rendering, such as Puppeteer or Rendertron.
  • The Googlebot uses Chrome 41 to render JavaScript websites. That version of Chrome was released in 2015 and does not support ES6.
  • Search Console allows you to view HTML rendered by Googlebot and review JavaScript exceptions and console logs.
  • If your website uses lazy loading images, add a noscript tag around a normal image tag to make sure Googlebot will pick them up.
  • Googlebot does not index images that are referenced through CSS.
  • Googlebot crawls and renders pages in a stateless way, it does not support Service workers, local and session storage, Cookies, Cache API and etc.
  • Google plans to bring rendering closer to crwaling and indexing and make Googlebot use a modern version of Chrome.

What’s worth watching

What’s worth watching

  • Ryan Dahl (Inventor of Node.js) on “10 Things I Regret About Node.js” (JSConf EU, 2018): reflection (after 6-year break) on what things could have been done differently in Node.js.
  • Mathias Bynens (Google) & Benedikt Meurer (Google) on “JavaScript Engines: The Good Parts™” (JSConf EU, 2018): key features and technics modern JavaScript engines (specifically, V8 and ChakraCore) use to achieve high performance.
  • Brittany Storoz on “The Etymology of Programming” (JSConf EU, 2018): revealing the mystery of some programming jargons and reasoning on how we as developers built a vocabulary full of such phrases.
  • Kinuko Yasuda, Jeffrey Yasskin & Kenji Baheux (Google) on “Packaging the Web” (BlinkOn 9, 2018): turns out Web Packaging is going to be more than just a way for Google to deliver AMP pages, it's also about secure sharing and distributing the content.

What’s worth watching

  • Jake Archibald (Google) on “In The Loop” (JSConf.Asia 2018): great (must-see) explanation of the browser’s event loop, revealing the difference between tasks, microtasks, requestAnimationFrame, requestIdleCallback, and where events land.
  • Bobby Ghoshal on “Designers, make this ONE mindset change in 2018” (AIGA 2017): customers is what design has always been about.
  • Jennifer Geacone-Cruz on “Perfectly Portable v2.0” (Fronteers Conference 2017): what influence Japanese mobile culture has had on how we make our development & design decisions today.
  • Jenn Schiffer (Glitch) on “How to be a real developer” (Deconstruct Conference, 2017): good laughter guaranteed.

What’s worth watching

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