When optimizing the speed of our websites from the server side, caching ranks among the most critical tasks to get just right. In this article, Leonardo Losoviz examines an architecture based on self-rendering components and SSR, and analyzes how to implement it for WordPress sites through Gutenberg.
Read more…
Overusing inline CSS or JS code, as opposed to serving code through static resources, can harm the site’s performance. In this article, we will learn how to load dynamic code through static files instead, avoiding the drawbacks of too much inline code.
Read more…
What does Gutenberg bring to the future of WordPress? In this article, Leonardo Losoviz shares a number of implications of building sites through a component-based architecture (as the concept) and through Gutenberg (as the implementation), including what new functionalities it can deliver and how much better it can integrate with current website development trends.
Read more…
Attribute selectors are magical. They can get you out of sticky problems, help you avoid adding classes and point out some problems in your code. In this article, John explains how to use attribute selectors the right way.
Read more…
Building websites is hard. Let’s explore the creation of a component from start to finish, in the context of an exaggerated reality where projects aren’t flawless.
Read more…
Developers conduct AB tests, accessibility audits, unit tests and cross-browser checks. Once you’ve solved a problem, you don’t want to repeat that effort. By building a reusable component library, we can continuously utilize past efforts and avoid revisiting already solved design and development challenges. In this article, Oliver Williams looks at augmenting HTML with components that have built-in functionality and styles. He’ll also show you how to make these custom elements reusable across projects using NPM.
Read more…
In this tutorial, you will build a sci-fi ID card for Avengers. Today, Kunal Sarkar will teach you Flexbox, Nested Flexbox, CSS animations, and a ton of other CSS techniques while building this interesting project. You will learn an effective way of making a full-page background, centering elements with Flexbox and auto margins, and see the basic usage of Flexbox and nested Flexboxes to make single dimension layouts. Let’s get started!
Read more…
It’s incredible to see how far web standards have come. Flash was one of the reasons a lot of folks started building websites. Flash was one of the reasons Simon Owen started building websites. It pioneered in a lot of areas, and this led to people creating amazing things with it. Over the years, it’s pushed the web forward a great deal. Adobe’s official announcement of dropping support of Flash, though, does raise concerns. Here are some of the groundbreaking things Flash could do back then, and how we can go about doing them today.
Read more…
Did you know that you can incorporate Vue into your project the same way that you would incorporate jQuery — with no build step necessary? Let’s cover some common use cases in jQuery and how we can switch them over to Vue, and why we’d even want to do so. In this article Sarah Drasner shows you that Vue is also a pretty nice abstraction for small sites that don’t need a lot of overhead. Due to Vue’s flexibility, it’s also easy to transition this code to a build step and component structures if you’d like to adopt a more complex structure over time. It’s actually pretty fun to try it out!
Read more…
In order to really know whether your work is any good, you need a higher level of principles that can be used as a measuring stick for implementing design. You need something that is removed from a specific language like CSS or an opinionated way of writing it. To bridge this gap, Tom Greever’s compiled nine principles of design implementation. This is a set of broad guidelines meant to preserve an underlying value. It can be used as a guide for someone working on implementation or as a tool to evaluate an existing project. To make it easier to follow along and see how each principle applies to a project, Tom will use a design mockup from one of his projects as the basis for this article.
Read more…