With a few additions, WordPress websites can accommodate a responsive image use case known as art direction. Art direction gives us the ability to design with images whose crop or composition changes at certain breakpoints. In this article, Laurie Laforest will show you how to set up a WordPress theme to support art direction in a simple manner. This method relies on WordPress’ standard administration interface as much as possible, and it requires only a single image to be uploaded.
Read more…
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, images load or dimensions of elements change. There are many solutions for avoiding the jump effect on page load, and implementing all of these techniques would take some time, but it is totally worth it — until scroll anchoring is supported in more browsers. In this article, Michael Scharnagl will share techniques to minimize this content shifting.
Read more…
In the previous article, Clayton Anderson showed you how React Native can help you make iOS and Android apps with a shared code base, without sacrifices in quality. But what about the web? React Native for Web is intended to let you write a single app that runs in a browser using standard web technologies, or on iOS and Android as a real native mobile app. While I don’t think the project is ready for production use yet, its potential success could mark a massive change in how large multi-platform applications are built. Let’s jump in!
Read more…
In this article, Filip Bartos will share his notes about installing and configuring a critical-path performance optimization using Express and Handlebars for an isomorphic React website. This website was developed using React, running on an Express server, and it was going well, but Filip still wasn’t satisfied with a load-blocking CSS bundle. So, he started to think about options for how to implement the critical-path technique on an Express server. Throughout this article, Filip will be using Node.js and Express. Familiarity with them will help you understand the examples.
Read more…
Varnishtest can be used to test a cache invalidation method or to reproduce bugs when filing a bug report. To ensure optimal performance from a Varnish Cache deployment, one should integrate Varnishtest into the design. Varnishtest can be used by system administrators in two scenarios: (1) when configuring a Varnish Cache installation, and (2) when writing complex caching policies in the Varnish Configuration Language (VCL) or when tuning Varnish Cache. Code tinkerers who work on extensions written for Varnish Cache (called VMODs) can use Varnishtest to define and test their modules.
Read more…
The best designs balance aesthetics and performance by working with mobile in mind from the start. In this article, Danny Bluestone will share the current mobile performance optimization processes he uses at Cyber-Duck. Aim to create a website that can balance aesthetics and performance on mobile, and achieve real conversion metrics. A collaborative, iterative performance optimization process will help you achieve this. Right from the start of the project, build an understanding of the client and server-side factors that determine website performance on mobile.
Read more…
What is that preload? What does it do? And how can it help you? Preload gives developers the ability to define custom loading logic without suffering the performance penalty that script-based resource loaders incur. In human terms, it’s a way to tell a browser to start fetching a certain resource, because you as authors know that the browser is going to need that particular resource pretty soon.
Read more…
In this article, Rachel Andrew will look at the basics of HTTP2 as they apply to web designers and developers. She’ll explain some of the key features of the new protocol, look at browser and server compatibility, and detail the things you might need to think about as we see more adoption of HTTP2. You will get an overview of what to consider changing in your workflow in the short and long term. Rachel will also include plenty of resources if you want to dig further into the issues raised. Her aim is to give you enough of the background to be able to make good decisions as you plan your move to HTTP2.
Read more…
Google announced its own plan to revolutionize mobile news consumption with an open-source web-based solution called Accelerated Mobile Pages, or AMP. While Facebook and Apple have a significant head start on Google, there’s every reason to believe that AMP will catch up quickly. If you’re a developer or a publisher who needs to get up to speed on the why, what and how of Google’s Accelerated Mobile Pages as fast and efficiently as possible, you’re in the right place.
Read more…
Smashing Magazine is known for lengthy, comprehensive articles. But what about something different for a change? What about shorter, concise pieces with useful tips that you could easily read over a short coffee break? As an experiment, this is one of the shorter Quick Tips-kind-of articles — shorter posts prepared and edited by our editorial team.
Read more…
