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…
If you’re building a physical structure, like a large edifice, with weak material, a lot of external support is required to hold it together, and things have to be overbuilt to stay sturdy. When you’re building a website out of HTML, CSS and JavaScript, this external support might look like frameworks, plugins, preprocessors, transpilers, editing tools, package managers and build processes. Instead of adding yet another plugin to the top of the stack, Yommy Hodgins thought of extending one of the core languages, CSS, to strengthen the material that websites are built from, developing better, stronger websites that require less external support and tools to build.
Read more…
In this article, Anna Selezniova will share her experience using CSS 3D effects for the first time in a real project and hopefully inspire you to take on challenges. Anna has gained useful experience in working with CSS 3D and she has discovered many interesting properties. More importantly, she has learned that one should never give up; most likely you will find a way to accomplish the task.
Read more…
