Reading list: 2018 February

Web development

Others

 

Advertisements

Two great talks from Chrome Dev Summit 2017

Fast By Default: Modern Loading Best Practices

Main points:

  • Mobile has changed everything from a UX point of view
  • Factors that impact loading time, best practices for loading
  • Important metric: time to interactive (the number of seconds before the user can make useful actions on the page)
  • Parsing JavaScript is expensive so deliver as little code as possible for low time to interactivity.
  • Test your web apps on average hardware as well, not just high-end devices.
  • Every member of the team is responsible for performance.
  • Recipe for building good websites
    • Develop on an average phone
    • Keep JS parse and eval low
    • Have a performance budget (time to interactive in less than 5 seconds)
  • Performance budget tools: Calibre, Speedcurve, Bundlesize
  • httparchive.org
  • Chrome User Experience Report
  • “Progressive web apps are the new normal.”
  • People are reluctant to install apps, mobile web gets stronger.
  • Overview for the new PWAs by Pinterest and Tinder (both are based on React)
  • Webpack Bundle Analyzer
  • Improving performance is a journey. Lots of small changes can lead to big gains.
  • MOM: Measure, Optimize, Monitor

Real World WebAssembly

Main points:

  • WebAssembly is for building high-performance code and running it inside your application.
  • It’s not a replacement for JavaScript, it works alongside JavaScript.
  • Compile C/C++ to wasm modules and call it from JavaScript.
  • Almost runs on native speed and also highly secure.
  • WebSight
  • Compiling the official JPEG library to a WebAssembly module, running a JPEG transcoder in the browser
  • Overview of Scirra Construct3 (a full featured web-based game editor)
  • Future features of WebAssembly (threads, improved support for debugging, garbage collection)
  • WebAssembly is ready for prime-time production applications.

A music visualizer with p5.js

GitHub: https://github.com/balazsdavid987/dineen-freeze
Demo (live): https://balazsdavid987.github.io/dineen-freeze/
Demo (video): https://www.youtube.com/watch?v=5DQdRuJlgDE

While browsing my Instagram feed, I have come upon an artist named Kyle Dineen who makes abstract sculptures inspired by music.

I wanted to make a music visualizer for a long time and his work seemed perfect. I wrote him a message for his permission to use his work and then decided to go with a piece called “Freeze”:

First, I have traced the shape (a polygon with 21 sides) and tried to identify its main components.

Continue reading