A Glimpse Into The Future With React Native For Web

01-react-native-welcome-ios-preview-opt.png

One of the hardest decisions to make when starting a new app is which platforms to target. A mobile app gives you more control and better performance but isn’t as universal as the web. If you’re making a mobile app, can you afford to support both iOS and Android? What about trying to build a mobile app and a responsive web app? Ultimately, the best experience for your customers is for your app to work everywhere, but the development and

Continue Reading

Optimizing Critical-Path Performance With Express Server And Handlebars

01-criticalcss-article-preview-opt.png

Recently, I’ve been working on an isomorphic React website. This website was developed using React, running on an Express server. Everything was going well, but I still wasn’t satisfied with a load-blocking CSS bundle. So, I started to think about options for how to implement the critical-path technique on an Express server. This article contains my notes about installing and configuring a critical-path performance optimization using Express and Handlebars. Prerequisites Link Throughout this article, I’ll be using Node.js and Express.

Continue Reading

How To Create A Responsive 8-Bit Drum Machine Using Web Audio, SVG And Multitouch

drum-kit-demo-1-preview-opt.png

In this little tutorial, I’m going to share some tips I recently followed to build a fun demo for the Build 20161 conference. The idea was to create a small 8-bit drum machine2, with 8-bit sounds and graphics: You can click on the black drums to make some noise (make sure sound is on). However, please note that the demo may not work on certain devices. (Demo3) This small web app was used in one of our demos to illustrate

Continue Reading

Using A Static Site Generator at Scale: Lessons Learned

new_no-cms-intro.svg

Static site generators are pretty en vogue nowadays. It is as if developers around the world are suddenly realizing that, for most websites, a simple build process is easy enough to render the last 20 years of content management systems useless. All right, that’s a bit over the top. But for the average website without many moving parts, it’s pretty close! However, does that hold true for websites bigger than your humble technology blog? How do static site generators behave

Continue Reading

The Illusion Of Life: An SVG Animation Case Study

02-transformations-opt.jpg

With flat design becoming the ever visible trend of 2016, it’s clear why there’s been a resurgence in SVG usage. The benefits are many: resolution-independence, cross-browser compatibility and accessible DOM nodes. In this article, we’ll take a look at how we can use SVGs to create seemingly complex animations from simple illustrations. The Brief Link Figure 1. What are we creating? Seemingly complex animations from simple SVG illustrations. This project began as a simple thought experiment: How far can we

Continue Reading

Making And Maintaining Atomic Design Systems With Pattern Lab 2

pattern-lab-2-image_1-opt.png

The benefits of UI design systems are now well known. They lead to more cohesive, consistent user experiences. They speed up your team’s workflow, allowing you to launch more stuff while saving huge amounts of time and money in the process. They establish a common vocabulary between disciplines, resulting in a more collaborative and constructive workflow. They make browser, device, performance, and accessibility testing easier. And they serve as a solid foundation to build upon over time, helping your organization

Continue Reading

Building A Cross-Platform WebGL Game With Babylon.js

Sponza.jpg

Here’s a challenge for you: what about building a 3D game over the weekend? Babylon.js1 is a JavaScript framework for building 3D games with HTML5, WebGL and Web Audio, built by yours truly and the Babylon.js team. To celebrate the new version 2.3 of the library, we decided to build a new demo “Sponza” to highlight what can be done with the WebGL engine and HTML5 today when it comes to building great games. The idea was to create a

Continue Reading

The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today

eqcss-logo-opt.png

For some time, we’ve run up against the limits of what CSS can do. Those who build responsive layouts will freely admit the frustrations and shortcomings of CSS that force us to reach for CSS preprocessors, plugins and other tools to help us write the styles that we’re unable to write with CSS alone. Even still, we run into limitations with what current tools help us accomplish. Think for a moment of a physical structure. If you’re building a large

Continue Reading

Site Footer

Sliding Sidebar

Tweets