Combining CSS :has() And HTML <select> For Greater Conditional Styling — Smashing Magazine
While the CSS :has() pseudo-class is widely celebrated for its ability to select a parent element up the chain conditionally based on its contents, there is more conditional logic it is capable of handling when we move it up the chain, so to speak. Amit Sheen demonstrates using :has() to apply styles conditionally when a certain <option> in a <select> element is chosen by the user and how we gain
Useful DevTools Tips and Tricks — Smashing Magazine
You might think you know all the tricks when it comes to browser DevTools, but did you know that there are dozens of panels and hundreds of features waiting to supercharge your debugging workflow? Whatever your debugging use case is, there’s probably a tool that’s right for the job. Let’s discover the most popular DevTools tips that can boost your productivity. When it comes to browser DevTools, w
Exploring The Potential Of Web Workers For Multithreading On The Web — Smashing Magazine
Multithreading is an important technique used in modern software development to enhance the performance and responsiveness of applications. However, it’s not a common practice on the web due to the single-threaded nature of JavaScript. To overcome this limitation, Web Workers were introduced as a way to enable this technique in web applications. In this article, Sarah Oke Okolo explores the import
You Don’t Need A UI Framework — Smashing Magazine
Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. Let’s talk about it. Every now and then, someone will ask for my recommendations on UI frameworks. By “UI framework”, I mean any third-party package that is focused on providing styled UI compo
Boost Resource Loading With fetchpriority, A New Priority Hint — Smashing Magazine
This new attribute will enable us to fine-tune relative resource priority, improve LCP performance, deprioritize JavaScript fetch calls, and much more. Let’s check out fetchpriority and explore some potential use cases. JavaScript, CSS, images, iframes, and other resources impact how quickly website loads, renders and becomes usable to the user. Loading experience is crucial to the user’s first im
Improving Core Web Vitals, A Smashing Magazine Case Study
At Smashing, we’ve struggled with amber Core Web Vitals score for a while. Then after 6 months we finally managed to fix it. Here’s a little case study on how we detected and fixed the bottlenecks, and how we ended up with green scores, all the way. “Why are my Core Web Vitals failing?” Many developers have been asking themselves that question lately. Sometimes it’s easy enough to find the answer
HTTP/3 From A To Z: Core Concepts — Smashing Magazine
After almost five years in development, the new HTTP/3 protocol is nearing its final form. Earlier iterations were already available as an experimental feature, but you can expect the availability and use of HTTP/3 proper to ramp up over in 2021. So what exactly is HTTP/3? Why was it needed so soon after HTTP/2? How can or should you use it? And especially, how does it improve web performance? Let
What’s New With DevTools: Cross-Browser Edition — Smashing Magazine
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. Browser developer tools keep evolving, with new and improved features added all the time. It’s hard to keep track, especially when using more than one browser. With that much on offer, it is n
There Is No Such Thing As A CSS Absolute Unit — Smashing Magazine
What are absolute units? What are the differences between relative and absolute units, and how do we create accurate sizes on the web? In this article, Elad Shechter explains why CSS absolute units aren’t so absolute. When we start learning CSS, we find that CSS units of measurement are categorized as relative or absolute. Absolute units are rooted in physical units, such as pixels, centimeters, a
Building A Dynamic Header With Intersection Observer — Smashing Magazine
Have you ever needed to build a UI where some component on the page needs to respond to elements as they’re scrolled to a certain threshold within the viewport — or perhaps in and out of the viewport itself? In JavaScript, attaching an event listener to constantly fire a callback on scroll can be performance-intensive, and if used unwisely, can make for a sluggish user experience. But there is a b
Image To Text Conversion With React And Tesseract.js (OCR) — Smashing Magazine
Do you have to process data manually because it is served through images or scanned documents? An image-to-text conversion makes it possible to extract text from images to automate the processing of texts on images, videos, and scanned documents. In this article, we look at how to convert an image to text with React and Tesseract.js(OCR), preprocess images, and deal with the limitations of Tessera
From AVIF to WebP: A New Smashing Book By Addy Osmani — Smashing Magazine
Meet our new book, “Image Optimization”, a deep-dive guide to understand how to deliver high-quality images on the web fast. 528 pages. From formats and compression to delivery and maintenance. Jump to details and get the book right away. Images have been a key part of the web for decades. We interpret images much faster than text, which is why high-quality visuals drive conversions and user engag
Tree-Shaking: A Reference Guide — Smashing Magazine
“Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more performant. Plus, you’ll get a tree-shaking checklist to use for your projects. Before starting our journey to learn what tree-shaking is and how to set ourselves up for success with it, we nee
The Humble <img> Element And Core Web Vitals — Smashing Magazine
Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy’s new book (also, check a free PDF preview). The humble <img> element has gained some superpowers over the years. G
A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors — Smashing Magazine
The CSS Working Group Editor’s Draft for Selectors Level 4 includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today! Pseudo-class selectors are the ones that begin with the colon character “:” and match based on a state
Overflow Issues In CSS — Smashing Magazine
In this article, we will explore the causes of overflow issues and how to solve them. We will also explore how modern features in the developer tools (DevTools) can make the process of fixing and debugging easier. If you’re a front-end developer, you may have come across horizontal scrollbar issues, especially on mobile. Because there are many causes of scrollbar problems, there is no straightforw
An In-Depth Guide To Measuring Core Web Vitals — Smashing Magazine
How are Core Web Vitals measured? How do you know your fixes have had the desired effect and when will you see the results in Google Search Console? Let’s figure it out. Google has announced that from May 2021 (edit: the date was just moved to June 2021), they will start to consider “Page Experience” as part of Search ranking, as measured by a set of metrics called Core Web Vitals. That date is ap
CSS Auditing Tools — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers to get their work done better and faster. Starting out with a few tools for getting to the bottom of CSS. How large is your CSS? How repetitive is it? What about your CSS specificity score? Can you safely remove some declarations and vendor prefixes, and if so, how do you spot them qui
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript — Smashing Magazine
Understanding App Directory Architecture In Next.js — Smashing Magazine