Next Generation Server Compression With Brotli

accept-encoding-br.png

Chances are pretty good that you’ve worked with, or at least understand the concept of, server compression. By compressing website assets on the server prior to transferring them to the browser, we’ve been able to achieve substantial performance gains. For quite some time, the venerable gzip algorithm has been the go-to solution for reducing the size of page assets. A new kid on the block has been gaining support in modern browsers, and its name is Brotli. In this article,

Continue Reading

Building Social: A Case Study On Progressive Enhancement

full-site-500-opt.jpg

We talk a lot about progressive enhancement and how it improves backwards compatibility. But how straightforward is it to apply progressive enhancement concepts to a real-life project? When designing a rich interactive experience, it can be difficult to determine what can be implemented purely using HTML and CSS and what absolutely requires JavaScript. Through this case study on redesigning the Building Social website, we’ll share some simple yet often overlooked front-end techniques that defer the use of JavaScript as much

Continue Reading

Content Security Policy, Your Future Best Friend

csp_smashing1b-500.jpg

A long time ago, my personal website was attacked. I do not know how it happened, but it happened. Fortunately, the damage from the attack was quite minor: A piece of JavaScript was inserted at the bottom of some pages. I updated the FTP and other credentials, cleaned up some files, and that was that. One point made me mad: At the time, there was no simple solution that could have informed me there was a problem and — more

Continue Reading

How To Scale React Applications

react-boilerplate-v3-release-screenshot-500px-opt.png

We recently released version 3 of React Boilerplate1, one of the most popular React starter kits, after several months of work. The team spoke with hundreds of developers about how they build and scale their web applications, and I want to share some things we learned along the way. 2 The tweet that announced3 the release of version 3 of React Boilerplate We realized early on in the process that we didn’t want it to be “just another boilerplate.” We

Continue Reading

Redesigning SGS’ Seven-Level Navigation System: A Case Study

sgs-previous-navigation-solution-500-opt.jpg

SGS (formerly Société Générale de Surveillance) is a global service organization and provider of inspection, verification, testing and certification services across 14 industries. SGS’ website (along with 60 localized websites) primarily promotes the organization’s core services, as well as provides access to a multitude of useful services, supplementary content and tools. Our goal was to transform sgs.com1 from being desktop-only to being responsive. This presented a unique set of challenges, especially around the legacy navigation system, which in areas was

Continue Reading

The Building Blocks Of Progressive Web Apps

graph-from-dazeend-500-opt.png

The common wisdom for most companies that set out to build an app is to build a native Android or iOS app, as well as a supporting website. Although there are some good reasons for that, not enough people know about the major advantages of web apps. Web apps can replace all of the functions of native apps and websites at once. They are coming more and more to the fore these days, but still not enough people are familiar

Continue Reading

Ways To Reduce Content Shifting On Page Load

padding-bottom-formula.svg

Have you ever opened a website, started reading and, after some time had passed and all assets had finished loading, you found that you’ve lost your scroll position? I undergo this every day, especially when surfing on my mobile device on a slow connection — a frustrating and distracting experience. Every time the browser has to recalculate the positions and geometries of elements in the document, a reflow happens. This happens when new DOM elements are added to the page,

Continue Reading

I Contributed To An Open-Source Editor, And So Can You

A few months ago, Jason Grigsby’s post about autocompletion in forms1 made the rounds. I loved the idea of allowing users to fill in their credit card details by taking a picture of their card. What I didn’t love was learning all of the possible values for autofill by heart2. I’m getting lazy in my old age. Lately, I’ve gotten spoiled from using an editor that does intelligent autocompletion for me, something that in the past only massive complex IDEs

Continue Reading

Site Footer

Sliding Sidebar

Tweets