@eprev

My name’s Anton Eprev and I’m a software engineer working as front-end developer at Booking.com in Amsterdam. Tinker with electronics and 3D printers in spare time. I’m on Twitter, GitHub and Unsplash.

Continuous deployment to GitHub Pages

Turned out Travis CI can deploy static websites to GitHub Pages without any hassle. Luckily to me, I’d already been using a Makefile to build this website, so it took a few minutes to set it all up.

First, I had to generate a new access token for Travis CI with the public_repo scope and hand it to Travis as a secret variable named GITHUB_TOKEN in the repository settings.

Then, I created .travis.yml file:

language: node_js
node_js:
- stable

git:
  submodules: false

script: make build

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_TOKEN
  keep-history: true
  local-dir: static
  on:
    branch: master

It commands Travis to execute make build to build the website. If it goes well, the Makefile creates the static directory (see local-dir option) with the contents of the website. Then Travis checks if the current branch is master and uploads the contents of local-dir to target-branch (defaults to gh-pages).

That was it. Now I can edit files directly on GitHub.com (you can also) and any changes made there will get deployed in a matter of minutes.

A philosophy of Software Design

In his “A Philosophy of Software Design” presentation at Google in 2018, John Ousterhout talked about how to (and how not to) design software and touched on a few key topics.

  • Problem decomposition is the most important concept of computer science.
  • Classes should be deep. Interface (methods signatures, dependencies and etc.) is a cost and functionality is a benefit. Aim for greater benefit, least cost. UNIX file I/O is a great example of a deep interface.
  • Exceptions are a huge source of complexity. Minimize the number of places where exceptions should be handled. For instance, instead of throwing an exception if either index is outside of the range of the string, define a method to extract a substring as returning an overlap between the indexes and the available contents.
  • Complexity isn’t one mistake you make, it’s a result of hundreds and thousands mistakes made by many people over a period of time.
  • Working code isn’t enough. Tactical programming (“Move fast and break things”) incrementally increases complexity.
  • You have to invest in a good design. It should be fine to go slower by 10-20%.

Cost of a pixel color

In their “Cost of a Pixel Color” presentation at Android Dev Summit 2018, Chris Banes & Alan Viverette explained why darker pixels save power and what developers can do to help users save battery life.

The following results were obtained for Pixel (AMOLED):

  • Pixel color values affects power usage. Blue takes 20% more power than green or red. Red consumes 600mW, green – 580mW, blue – 800mW.
  • By switching to the Dark theme in Youtube (at full brightness) you save up to 43% of battery display usage when playing a video and even more (up to 60%) when paused.
  • By using Night Mode in Google Maps (at max brightness) you save up to 31% of battery display usage.

Building a foundation for performance

In her “Building a foundation for performance” presentation at performance.now() 2018, Michelle Vu tells a story of how the web performance team at Pinterest started off and made performance a priority for the company.

  • Pinterest created a dedicated performance team in 2017.
  • Ownership over performance involves looking after metrics quality, tooling (analytics, monitoring), regression investigations, analysis, support.
  • Tie performance metrics to business metrics. Explain what 200ms page load regression means for the business.
  • Start with building trust by validating performance metrics, implementing confidence tests, creating graphs reflecting real user experience and catching regressions.
  • In case of an incident, identify an owner, set a severity level, follow the runbook and do a post mortem.
  • Set a company-wide goal to improve key performance metrics.
  • Write documentation on key metrics, past optimizations, ideas for future improvements, regression investigation runbook.
  • Consult other teams and conduct trainings.

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 until 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 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 crawling 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.
Archive