Is this you? As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.
Claim your profile
Articles by Adrian Bece
The View Transitions API And Delightful UI Animations (Part 2) — Smashing Magazine
28 min read CSS, API, Animation, UI, Techniques Share on Twitter, LinkedIn The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks.
The View Transitions API And Delightful UI Animations (Part 1) — Smashing Magazine
26 min read CSS, API, Animation, UI, Techniques Share on Twitter, LinkedIn The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks. In the first part of this mini two-part series, Adrian Bece thoroughly explains why we need the API and demonstrates its basic usage. Animations are an essential part of a website.
Delightful UI Animations With Shared Element Transitions API (Part 1) — Smashing Magazine
26 min read CSS, API, Animation, UI, Techniques Share on Twitter, LinkedIn The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks. In the first part of this mini two-part series, Adrian Bece thoroughly explains why we need the API and demonstrates its basic usage. Animations are an essential part of a website.
WaterBear: Building A Free Platform For Impactful Documentaries (Part 2) — Smashing Magazine
17 min read Accessibility, Performance, Case Studies Share on Twitter, LinkedIn In this second article of a two-part series, Adrian shares insights about building WaterBear — his first project as a lead developer — discussing the challenges his team encountered while building it and various accessibility and performance improvements they’ve made. You’ll get a peek at the inner workings of a team striving to find its groove to systematize the work.
WaterBear: Building A Free Platform For Impactful Documentaries (Part 1) — Smashing Magazine
15 min read Workflow, Case Studies Share on Twitter, LinkedIn Adrian’s kicking off a two-part series, sharing his journey as a lead developer. Join him as he delves into his first major project — WaterBear, a free platform for documentaries. In the process, you will learn about the lessons and insights Adrian gained at work, including the strategies that went into the technical stack of the project and what it looks like to collaborate with a team he is leading for the first time.
Smashing Podcast Episode 64 With Alvin Bryan: What Is A Headless CMS? — Smashing Magazine
26 min read Smashing Podcast Share on Twitter, LinkedIn We’re talking about headless content management systems. What are they, and how do they differ from more traditional systems? Drew McLellan talks to Alvin Bryan to find out. We’re talking about headless content management systems. What are they, and how do they differ from more traditional systems? Drew McLellan talks to Alvin Bryan to find out. Show Notes Alvin Bryan’s website.
Smashing Podcast Episode 64 With Alvin Bryan: What Is A Headless CMS?
We’re talking about headless content management systems. What are they, and how do they differ from more traditional systems? Drew McLellan talks to Alvin Bryan to find out. Show Notes Alvin Bryan’s website.
Recreating YouTube’s Ambient Mode Glow Effect — Smashing Magazine
15 min read CSS, HTML, UI, Tools, Techniques Share on Twitter, LinkedIn Discover with Adrian what’s behind the charming glow effect on Youtube and how you can use it to make your own videos more immersive. Deconstruct YouTube’s “Ambient Mode” feature and learn how HTML <canvas> and the requestAnimationFrame function are used to create this glowing effect. I noticed a charming effect on YouTube’s video player while using its dark theme some time ago.
Smashing Podcast Episode 56 With Veerle Pieters: How Has The Design Industry Changed? — Smashing Magazine
42 min read Smashing Podcast Share on Twitter, LinkedIn In this episode of the Smashing Podcast we ask how has the design industry changed? Is technology making our work easier? Vitaly Friedman talks to veteran designer Veerle Pieters to find out. In this episode of the Smashing Podcast we ask how has the design industry changed? Is technology making our work easier? Vitaly Friedman talks to veteran designer Veerle Pieters to find out.
Easy SVG Customization And Animation: A Practical Guide — Smashing Magazine
31 min read SVG, Coding, Animation, Guides Share on Twitter, LinkedIn Developers often feel discouraged from editing SVG markup and experimenting with SVG animations, thinking it’s a significant time investment or they need to use a complex animation library to do so. In this article, Adrian showcases his favorite tricks, which make the process streamlined and fun. Scalable Vector Graphics (SVG) have been a staple in Web Development for quite some time, and for a good reason.
Accessible Front-End Patterns For Responsive Tables (Part 2) — Smashing Magazine
16 min read Accessibility, Responsive Design Share on Twitter, LinkedIn There is no universal solution for making every kind of table responsive and usable on smaller screens, so we have to rely on various patterns, which Adrian explains in this two-part series. In Part 1, we explored general patterns of creating responsive and accessible tables depending on the design, use case, and data complexity.
Accessible Front-End Patterns For Responsive Tables (Part 1) — Smashing Magazine
17 min read Accessibility, UI, UX, Usability Share on Twitter, LinkedIn There is no universal solution for making every kind of table responsive and usable on smaller screens, so we have to rely on various patterns, which Adrian explains in this two-part series. Tables allow us to organize data into grid-like format of rows and columns.
Delightful UI Animations With Shared Element Transitions API (Part 2) — Smashing Magazine
14 min read CSS, API, Animation, UI, Techniques Share on Twitter, LinkedIn In this article, Adrian Bece will show how to create same-document page transitions for Single Page Apps using Shared Element Transitions API and check out its future implementation and potential for creating cross-document transitions in Multi-Page Apps.
Delightful UI Animations With Shared Element Transitions API (Part 1) — Smashing Magazine
25 min read CSS, API, Animation, UI, Techniques Share on Twitter, LinkedIn Shared Element Transitions API is a game-changing feature that will enable us to create impressive and elaborate UI animations easily. In this article, Adrian Bece will explore its incredible potential by building four real-life examples from scratch. Animations are an essential part of web design and development.
Smashing Podcast Episode 47 With Sara Soueidan: Why Does Accessibility Matter? — Smashing Magazine
36 min read Smashing Podcast Share on Twitter, LinkedIn Quick summary ↬ In this episode of the Smashing Podcast, we ask why accessibility really matters and why it is so important to get it right. Smashing’s Vitaly Friedman talks in-depth to Sara Soueidan to find out. In this episode of the Smashing Podcast, we ask why accessibility really matters and why it is so important to get it right. Smashing’s Vitaly Friedman talks in-depth to Sara Soueidan to find out.
Lesser-Known And Underused CSS Features In 2022 — Smashing Magazine
18 min read CSS, SVG, Performance, Optimization Share on Twitter, LinkedIn Quick summary ↬ CSS is constantly evolving, and some cool and useful properties either go completely unnoticed or are not talked about as much as others for some reason or another. In this article, we’ll cover a fraction of those CSS properties and selectors.
How To Boost Resource Loading With The New Priority Hint fetchpriority — Smashing Magazine
11 min read Performance, JavaScript, Optimization Share on Twitter, LinkedIn Quick summary ↬ 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.
Claymorphism: Will It Stick Around? — Smashing Magazine
12 min read UI, CSS, Techniques, Accessibility Share on Twitter, LinkedIn Quick summary ↬ This fresh new design trend has been picking up steam with the rising popularity of colorful inflated 3D graphics in web illustrations and with the latest Virtual Reality projects like “Horizon Worlds”. Let’s see if there is room for Claymorphism on the UI, and how we can create this effect with CSS. Design trends come and go, and just a fraction sticks around longer than others.
Improving JavaScript Bundle Performance With Code-Splitting — Smashing Magazine
20 min read Apps, Workflow, JavaScript, Performance Share on Twitter, LinkedIn Quick summary ↬ In this article, Adrian Bece shares more about the benefits and caveats of code-splitting and how page performance and load times can be improved by dynamically loading expensive, non-critical JavaScript bundles. 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.
Modern Fluid Typography Using CSS Clamp — Smashing Magazine
18 min read CSS, Accessibility, Typography, Responsive Web Design Share on Twitter, LinkedIn Quick summary ↬ In this article, we’ll explore fluid typography principles, use-cases, best practices, implementation with CSS clamp function and how to calculate the required parameters. We’ll also learn how to address some a11y concerns and watch out for one important issue that we cannot fix as of yet, but have to be aware of regardless.
Refactoring CSS: Optimizing Size And Performance (Part 3) — Smashing Magazine
16 min read CSS, Refactoring, Testing, Performance Share on Twitter, LinkedIn Quick summary ↬ Refactored codebase should result in similar or improved performance and improved codebase health. After all, if deploying the refactored codebase causes loading or performance issues, it will result in less traffic and revenue. Luckily, there are many optimization techniques we can apply to tackle potential file size and performance issues.
Refactoring CSS: Strategy, Regression Testing And Maintenance (Part 2) — Smashing Magazine
27 min read CSS, Testing, Techniques Share on Twitter, LinkedIn Quick summary ↬ After analyzing the CSS codebase and its weaknesses, and management giving a green light to the refactoring project, it’s time to start refactoring the codebase. A team needs to agree on the internal code standards and best practices, plan out the refactoring strategy, and outline individual tasks.
Refactoring CSS: Introduction (Part 1) — Smashing Magazine
16 min read CSS Share on Twitter, LinkedIn Quick summary ↬ CSS refactoring is not an easy task — it needs to be done in a way that doesn’t create problems. First we need to analyze the existing codebase, audit CSS codebase health, discover weaknesses, agree on the approach, and convince management to invest time and resources into the process. CSS is a simple stylesheet language for defining a website or document’s presentation.
Smashing Podcast Episode 39 With Addy Osmani: Image Optimization — Smashing Magazine
About The Author Drew is a Staff Engineer specialising in Frontend at Snyk, as well as being a co-founder of Notist and the small content management system Perch. Prior to this, … More about Drew ↬ In this episode of the Smashing Podcast, we’re talking about image optimization. What steps should we follow for performant images in 2021? We talk to expert Addy Osmani to find out. In today’s episode of the Smashing Podcast, we’re talking about image optimization.
Meet :has, A Native CSS Parent Selector (And More) — Smashing Magazine
12 min read CSS, Tools, Workflow Share on Twitter, LinkedIn Quick summary ↬ What makes relational selector one of the most requested features and how are we, as developers, working around not having it? In this article, we’re going to check the early spec of the :has selector, and see how it should improve the CSS workflow once it’s released.
Let’s Create an Image Pop-Out Effect With SVG Clip Path
Take the pain out of building site search with the Algolia hosted API. Start free now! Few weeks ago, I stumbled upon this cool pop-out effect by Mikael Ainalem. It showcases the clip-path: path() in CSS, which just got proper support in most modern browsers. I wanted to dig into it myself to get a better feel for how it works. But in the process, I found some issues with clip-path: path(); and wound up finding an alternative approach that I wanted to walk through with you in this article.
A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders
UI components like spinners and skeleton loaders make waiting for a page load less frustrating and might even affect how loading times are perceived when used correctly. They won’t completely prevent users from abandoning the website, but they might encourage them to wait a bit longer. Animated spinners are used in most cases since they are easy to implement and they generally do a good enough job.
How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy | CSS-Tricks
DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit. A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they display properly. People do this with Google Fonts a zillion times a day, dropping its <link> tag into the <head>. Let’s see what Lighthouse has to say about this workflow.
Must Read Developer Articles on Hashnode - #20
Compiling a list of must-read developer articles on Hashnode every week is definitely one of my week's highlights because the articles are always so good. Thank you all for publishing articles on your Hashnode powered blog. Here are last week's must-read articles on Hashnode. 10 best JavaScript practices recommended by Top Developers Written by Hrithwik Bharadwaj. An Introvert's Personal Guide to Tech Twitter Written by Sarah Shook.
Here’s How I Solved a Weird Bug Using Tried and True Debugging Strategies
Remember the last time you dealt with a UI-related bug that left you scratching your head for hours? Maybe the issue was happening at random, or occurring under specific circumstances (device, OS, browser, user action), or was just hidden in one of the many front-end technologies that are part of the project? I was recently reminded of how convoluted UI bugs can be. I recently fixed an interesting bug that was affecting some SVGs in Safari browsers with no obvious pattern or reason.
Best way to lazy load images for maximum performance
PROTOTYP Adrian Bece Aug 24 Originally published at blog.prototyp.digital ・4 min read Image lazy loading is one of the more popular approaches of optimizing websites due to the relatively easy implementation and large performance gain. With lazy loading we load images asynchronously, meaning that we load images only when they appear in the browser's viewport. Almost a year ago, native lazy loading for images and iframes was released for Chrome and other major browsers.
Smashing Podcast Episode 12 With Paul Boag: What Is Conversion Optimisation? — Smashing Magazine
About The Author Drew is a director at edgeofmyseat.com, co-founder of Notist and lead developer for small content management system Perch. Prior to this, he was a Web Developer … More about Drew McLellan … In this episode of the Smashing Podcast, we’re talking about the user experience around converting site visitors into customers. Can our selling techniques leave customers feeling cheated? And how can that be avoided?
Neumorphism and CSS
Neumorphism (aka neomorphism) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. It’s aesthetic is marked by minimal and real-looking UI that’s sort of a new take on skeuomorphism — hence the name. It got its name in a UX Collective post from December 2019, and since then, various design and development communities have been actively discussing the trend, usually with differing opinions. Chris poked fun at it on Twitter.
UX lessons learned from eCommerce projects
I have worked as a certified Magento 1 and Magento 2 frontend developer for an eCommerce agency for 4 years. I've developed and maintained several webshops ranging from small scale to enterprise shops and I've audited numerous websites for frontend performance and UX. After moving onto non-eCommerce projects, I've noticed that I could apply the lessons I've learned while working on eCommerce to create very user-friendly and performant frontends with great UX features.
Improving CSS performance and file size - an in-depth guide
Table Of Contents What makes CSS slow File size CSS rendering Reducing CSS file size Minification Optimization Compression CSS structure will-change property contain property What makes CSS slow? File size Large file size results in larger download times and parsing times. It's simple as that. CSS Rendering In order to understand where CSS rendering bottlenecks may come up, we need to look at the render pipeline steps: 1.
Improve your CSS with these 5 principles
Adrian Bece twitter logo github logo Oct 7 ・5 min read Writing CSS is really simple and straightforward, so why is there a need for principles and best-practices while writing CSS? As the project scope increases and as the number of people working on the project increases, the problems become more and more apparent and can cause serious issues down the line.
Optimizing images for the web - an in-depth guide
Table Of Contents Online image optimization Automated solutions Using CDN WebP image format Unoptimized (non-minified) images are one of the main causes of poor website performance, mainly on the initial (first) load. Depending on the resolution and image quality, you might end up with images that take up more than 70% of your total website size. It's very easy for unoptimized images to end up on a production site and slow down its initial load considerably.
Implementing Skeleton Loading in React
The idea and concept of Skeleton Loading or Skeleton Screens was introduced in 2013. in this blog post by Luke Wroblewski. It describes the concept of a blank screen where dynamic content is replaced by styled blocks (skeleton) and is replaced with real content once it's finished loading. Skeleton loading is better than a spinner When a user looks at the page with a standard loading spinner, they're thinking "I'm waiting for it to load".
Show More
loading
Actions
Is this you?
As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.Get in touch with Adrian
Contact Adrian, search articles and posts on X, monitor coverage, and track replies from one place.
Learn more about Muck Rack