When working with creative designers on web page designs, it’s fairly common to receive multiple Sketch or Photoshop artboards/layouts, one for each breakpoint. In this article, Jake Wilson is going to examine how to create scalable, fluid typography across multiple breakpoints and predefined font sizes using well-supported browser features and some basic algebra. The best part is that you can automate it all by using Sass.
Read more…
In this article, Serg Hospodarets will teach you more about CSS custom properties, including their syntax, their advantages, good usage examples and how to interact with them from JavaScript. You will learn how to detect whether they are supported, how they are different from CSS preprocessor variables, and how to start using native CSS variables until they are supported across browsers. This is the right time to start using CSS custom properties and to prepare for their native support in browsers.
Read more…
In this article, Jeremy Wagner will teach you everything about server push, from how it works to the problems it solves. Server push allows you to send site assets to the user before they’ve even asked for them. It’s an elegant way to achieve the performance benefits of HTTP/1 optimization practices such as inlining, but without the drawbacks that come with that practice. Jeremy will also show you how to use it, how to tell if it’s working, and its impact on performance. Let’s begin!
Read more…
In this article, Lea Verou explains what an HTML API is, why they’re useful, and which important lesson developers can learn from them. Keep reading to find out how to design a good one. You might be wondering, “All HTML and CSS authors know JavaScript, right?” Wrong. Take a look at the results of following poll.
Read more…
Creating responsive email is not an easy task. If you want to stand out, no matter how beautiful your emails are, you need to make sure they render correctly in your reader’s inbox, regardless of what email client they’re using. There are a few techniques out there to help email developers. You might be familiar with some of them, such as the hybrid approach, the mobile-first approach or even the Fab Four technique by HTeuMeuLeu. But because of the reasons stated earlier, and especially the lack of a standard, none of these techniques will enable you to tame all email clients at once.
Read more…
Sometimes animation that is nice and smooth in a simple demo runs very slowly on a real website, introduces visual artefacts or even crashes the browser. Why does this happen? How do we fix it? In this article, Sergey Chikuyonok aims to help you to better understand how the browser uses the GPU to render, so that you can create impressive websites that run quickly on all devices. Let’s do it!
Read more…
If you don’t want your design to look like it’s made out of unrelated things, this article is for you. There is already a technology, called CSS, which is designed specifically to solve this problem. Using CSS, you can propagate styles that cross the borders of your HTML components, ensuring a consistent design with minimal effort. Today, Heydon Pickering is going to revisit inheritance, the cascade and scope here with respect to modular interface design. He aims to show you how to leverage these features so that your CSS code becomes more concise and self-regulating, and your interface more easily extensible.
Read more…
In this article Rachel Andrew explains how Flexbox and CSS Grid fit together, and how we can build resilient and flexible layouts today while providing a decent fallback for older browsers. Editor’s note: Please note that this article is quite lengthy, and contains dozens of CodePen embeds for an interactive view. The page might take a little while to load, so please be patient.
Read more…
With so many amazing designers creating such beautiful animations, any developer would naturally want to recreate them in their own projects. Now, CSS does provide some presets for transition-timing-function, which add some level of smoothness and realism, but they are very generic, aren’t they? Motion curves are primarily used by animators to create advanced, realistic animations. In this article, Nash Vail will show you how motion curves work. Let’s begin!
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…
