博客 / 列表

Adrian Bece - Refactoring CSS: Introduction (Part 1)

CSS is a simple stylesheet language for defining a website or document’s presentation. However, this simplicity leaves the door open for many potential issues and technical debt — bloated code, spec

Refactoring , CSS Grid , Css

Adrian Bece - Refactoring CSS: Strategy, Regression Testing And Maintenance (Part 2)

In Part 1, we’ve covered the side effects of low-quality CSS codebase on end-users, development teams, and management. Maintaining, extending, and working with the low-quality codebase is difficult

Refactoring , Techniques , testing , Css

Adrian Bece - Refactoring CSS: Optimizing Size And Performance (Part 3)

In previous articles from this series, we’ve covered auditing CSS codebase health and the incremental CSS refactoring strategy, testing, and maintenance. Regardless of how much the CSS codebase has

performance , Refactoring , testing , Css

Adrian Bece - Modern Fluid Typography Using CSS Clamp

The concept of fluid typography in web development has been present for years, and developers had to rely on various workarounds to make it work in the browser. With the new CSS clamp function, crea

Typography , Tools , Css

Adrian Bece - Improving JavaScript Bundle Performance With Code-Splitting

Projects built using JavaScript-based frameworks often ship large bundles of JavaScript that take time to download, parse and execute, blocking page render and user input in the process. This proble

performance , workflow , Apps , Javascript

Adrian Bece - Claymorphism: Will It Stick Around?

Design trends come and go, and just a fraction sticks around longer than others. Flat design and its more popular successor, Material design, have been dominating the web UI for quite some time, fea

Techniques , Css , ui

Adrian Bece - Boost Resource Loading With fetchpriority, A New Priority Hint

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 impression and overa

performance , optimization , Javascript

Adrian Bece - Lesser-Known And Underused CSS Features In 2022

After reading Louis Lazaris’ insightful article “Those HTML Attributes You Never Use”, I’ve asked myself (and the community) which properties and selectors are lesser-known or should be used more of

performance , optimization , Css , svg

Adrian Bece - Delightful UI Animations With Shared Element Transitions API (Part 1)

Animations are an essential part of web design and development. They can draw attention, guide users on their journey, provide satisfying and meaningful feedback to interaction, add character and fl

animation , Techniques , API , Css , ui

Adrian Bece - Delightful UI Animations With Shared Element Transitions API (Part 2)

In the first part of this article, we covered Shared Element Transitions API (SET API) and how we can use it to effortlessly create complex transitions for various UI elements, which would usually r

animation , Techniques , API , Css , ui

Adrian Bece - Accessible Front-End Patterns For Responsive Tables (Part 1)

Tables allow us to organize data into grid-like format of rows and columns. Scanning the table in one direction allows users to search and compare the data while scanning in the other direction lets

Accessibility , ux , Usability , ui

Adrian Bece - Accessible Front-End Patterns For Responsive Tables (Part 2)

In Part 1, we explored general patterns of creating responsive and accessible tables depending on the design, use case, and data complexity. In this article, we’ll cover a few more complex and more

Responsive Design , Accessibility

Adrian Bece - Easy SVG Customization And Animation: A Practical Guide

Scalable Vector Graphics (SVG) have been a staple in Web Development for quite some time, and for a good reason. They can be scaled up or down without loss of quality due to their vector properties.

animation , Guides , coding , svg

Adrian Bece - Recreating YouTube’s Ambient Mode Glow Effect

I noticed a charming effect on YouTube’s video player while using its dark theme some time ago. The background around the video would change as the video played, creating a lush glow around the vide

Techniques , Tools , Css , HTML , ui

Adrian Bece - WaterBear: Building A Free Platform For Impactful Documentaries (Part 1)

A few months ago, I worked on what is probably the most remarkable and exciting project of my career so far. It’s a wonderful free platform that brings together inspiration and action called WaterBe

workflow , Case Studies

Adrian Bece - WaterBear: Building A Free Platform For Impactful Documentaries (Part 2)

In my previous article, I talked about Waterbear, a significant project I worked on as a newly-appointed lead developer, and the lessons I learned leading a team for the first time. In this second a

performance , Accessibility , Case Studies

Adrian Bece - The View Transitions API And Delightful UI Animations (Part 1)

Animations are an essential part of a website. They can draw attention, guide users on their journey, provide satisfying and meaningful feedback to interaction, add character and flair to make the w

animation , Techniques , API , Css , ui

Adrian Bece - The View Transitions API And Delightful UI Animations (Part 2)

Last time we met, I introduced you to the View Transitions API. We started with a simple default crossfade transition and applied it to different use cases involving elements on a page transitioning

animation , Techniques , API , Css , ui