September 13, 2021 — There are way too many options in Web Animations API to pick them up that easily. There’s no middle ground between simple transitions and complex animations. You’re either fine with what CSS Transitions and Animations provide or you suddenly need all the power you can get. Learning how timing works and how to control the playback of several animations at once makes for a solid foundation on which to base your projects on. Read more…

September 10, 2021 — For better or worse, the web is absolutely awash with content. A lot of it is great, a lot of it is not. A lot of the talk around it has the cold, calculating cadence you’d sooner expect from industrialists talking about assembly lines.  They say content is king, and they’re right. The web has unlocked untold possibilities for storytellers — provided the story is right, of course. Here are some of our favorite examples of editorial content thriving in the digital realm. Read more…

September 9, 2021 — When paired with ISR and Next.js’ API routes, SWR can be used to create a responsive user experience. In this article, Sam Poder explains what SWR is, where to use it (and where not), and how to build a website by using Incremental Static Regeneration. This approach ensures that users still have a good experience, that the site is fast and that the data is kept up to date. Read more…

September 8, 2021 — Being able to look past the apparent simplicity, break down a component into its constituent parts, ask key questions, and even consider future uses, are all skills that will serve any developer well when building websites In this article, we’ll walk through the process of taking a seemingly simple design for a text-and-media component and deciding how best to translate it into code, keeping in mind the needs of both users and content authors. Read more…

September 8, 2021 — What’s the state of HTML Email, Vue.js and Next.js? What are new, smart interface design patterns we could use? Let’s figure it out. With our brand new online workshops on front-end & design. Now with free workshops for you to test the waters. Read more…

September 7, 2021 — Learn what’s new with developer tools in Firefox, Edge, Chrome and Safari. Discover new and powerful features that will help you be more comfortable and productive when testing and debugging across browsers. With this article, Patrick Brosset tries to make you want to try them out, and maybe will help you get more comfortable next time you need to debug a browser-specific issue. Read more…

September 6, 2021 — After almost five years in development, the new HTTP/3 protocol is nearing its final form. In this part 3, Robin Marx will look at how to practically use and deploy QUIC and HTTP/3, by looking at most best practices and lessons learned from HTTP/2. You’ll discuss that it might take a while before off-the-shelf web server packages provide full HTTP/3 support, and how most major browsers have HTTP/3 support, even enabled by default. Let’s take a close look at the challenges involved in deploying and testing HTTP/3, and how and if you should change your websites and resources as well. Read more…

September 3, 2021 — Websites, unfortunately, aren’t as environmentally friendly as we might like them to be. In this article, Berwyn Powell takes a look at his experience in trying to make websites better for the environment. Hopefully, this will give you some ideas for things to try on your own websites. It can be quite disheartening to run a page through the Website Carbon Calculator and be told that it could be emitting hundreds of kilograms of CO2 a year. Fortunately, the sheer size of the web can amplify positive changes as well as negative ones, and even small improvements soon add up on websites with thousands of visitors a week. Read more…

September 2, 2021 — There are plenty of interactive ways to learn new web development skills. We learn better by playing games. So we’ve collected interactive coding tools and games to help you learn CSS, JavaScript, SQL, React, Vim, regular expressions, Jamstack and pretty much everything in-between. Louis shares a comprehensive, categorized list of such tools covering a variety of different development technologies. Read more…

September 1, 2021 — What exactly is a displacement filter? In this article, Dirk Weber will be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all easier to digest, Dirk has divided the article into three parts in which you’ll be exploring how the feDisplacementMap works, methods to create fancy displacement maps in SVG, and methods to animate the filter and create dramatic visual effects. Read more…