August 2021 marks a milestone for me. That’s when we signed an acquisition agreement to sell Chatra, a profitable live…
I love free tiers, and I am not the only one. Everyone loves free things — they’re the best thing…
Ensuring technology is accessible and inclusive relies heavily on receiving feedback directly from disabled users. You cannot rely solely on…
In 1998, Judy Singer, an Australian sociologist working on biodiversity, coined the term “neurodiversity.” It means every individual is unique,…
We rarely read on the web. We mostly scan. That’s a reliable strategy to quickly find what we need in…
Three years ago, I published “Making GraphQL Work In WordPress,” where I compared the two leading GraphQL servers available for…
When copying text from a website to your device’s clipboard, there’s a good chance that you will get the formatted…
This article is a sponsored by DebugBear Google’s Core Web Vitals initiative has increased the attention website owners need to…
In a previous article, we played with CSS masks to create cool hover effects where the main challenge was to…
This article is a sponsored by Penpot It was less than a year ago when I first had a chance…
Communication is in everything we do. We communicate with users through our research, our design, and, ultimately, the products and…
Remember the “mobile first” mantra? The idea was born out of the early days of responsive web design. Rather than…
We all have an inherent tendency to like aesthetic and approachable things. That’s why any designer strives to deliver an…
When I was asked to make an auto-scrolling logo farm, I had to ask myself: “You mean, like a <marquee>?”…
New month, new wallpapers! To cater for a fresh dose of colorful inspiration on a regular basis, we embarked on…
I have had my fair share of projects that have given me life because of what I accomplished, as well…
This article is a sponsored by Maze How do product teams conduct user research today? How do they leverage user…
Many modern websites give users the power to set a site-specific color scheme preference. A basic implementation is straightforward with…
In today’s dynamic and highly competitive market, the concept of brand experience is a key aspect of customer engagement: designers,…
Building at scale is hard. With legacy, fragile systems, large impact and complex front-end architecture, making big changes to an…
I have been reading and following Smashing Magazine for years — I’ve read many of the articles and even some…
This article is a sponsored by Bryntum Need a full-fledged calendar for scheduling events on your website? Just download one…
We love practical books that focus on failures and success stories. And we’ve finally sent our latest book, Addy Osmani’s…
I hope you were able to spend time getting familiar with the techniques we used to create tooltips in Part…
A fun fact about me is that my birthday is on Valentine’s Day. This year, I wanted to celebrate by…
In a previous article, we explored ribbon shapes and different ways to approach them using clever combinations of CSS gradients…
March is here! With the days getting noticeably longer in the northern hemisphere, the sun coming out, and the flowers…
This article is a sponsored by DebugBear There’s quite a buzz in the performance community with the Interaction to Next…
Web accessibility can be challenging, particularly for clients unfamiliar with tech or compliance with The Americans With Disabilities Act (ADA)….
In his seminal piece “The Market For Lemons”, renowned web crank Alex Russell lays out the myriad failings of our…
Too often, accessibility is seen as a checklist, but it’s much more complex than that. We might be using a…
I often hear that native mobile app accessibility is more challenging than web accessibility. Teams don’t know where to start,…
Data visualizations are graphics that leverage our visual system and innate capabilities to gather, accumulate, and process information in our…
Children start interacting with the web when they are 3–5 years old. How do we design for children? What do…
I got to work with a new type of chart for data visualization called a radar chart when a project…
I felt uninspired for a spell in 2019 and decided to enroll in a beginning-level community college course on web…
Front-end development seemed simpler in the early 2000s, didn’t it? The standard website consisted mostly of static pages made of…
Today, one billion people are 60 years or older. That’s 12% of the entire world population, and the age group…
Few technological innovations can completely change the way we interact with computers. Lucky for us, it seems we’ve won front-row…
What will you make of the extra day that February has in store for us this year? Call an old…
Most product teams think in terms of features. Features are easy to brainstorm and write requirement docs for, and they…
Suppose you ask some AI-based chat app a reasonably simple, straightforward question. Let’s say that app is ChatGPT, and the…
Imagine box-shadow but for a blur effect, where the backdrop of an element is blurred around that element, gradually decreasing…
Imagine it’s 2028, and you’re at your projected, suped-up workstation. “Hey AI,” you say, “I need some type options for…
The border-image property is nothing new. Even deprecated Internet Explorer supports it, so you know we’re treading well-charted territory. At…
Over the past 12 months, I’ve shared hundreds of tools in my newsletter, Web Tools Weekly. I feature tons of…
The current landscape of web tooling is increasingly more complex than ever before. We have libraries such as Solid, Vue,…
Last time we met, I introduced you to the View Transitions API. We started with a simple default crossfade transition…
Maybe 2024 has already started as you’re reading this, maybe you’re still waiting for the big countdown to begin. Either…
Why does JavaScript have so many eccentricities!? Like, why does 0.2 + 0.1 equals 0.30000000000000004? Or, why does “” ==…
Animations are an essential part of a website. They can draw attention, guide users on their journey, provide satisfying and…
Browsers shipped a new set of CSS viewport units in 2022. These units make it easier to size elements in…
Welcome back to my long read about building better components — components that are more likely to be found, understood,…
You know what’s perhaps the “cheapest” way to make a slider of images, right? You set up a container, drop…
Design systems are on the tip of every designer’s tongue, but the narrative in the industry mainly focuses on why…
This article is a sponsored by DebugBear There’s a change coming to the Core Web Vitals lineup. If you’re reading…
In today’s world of shortening attention spans and omnipresent hustle, wasting even a second could mean losing the chance to…
Even though JavaScript’s name was coined from the Java language, the two languages are worlds apart. JavaScript has more in…
There are times when mistakes happen, and useful and important files are deleted by error or lost from your file…
As the year is coming to a close, many of us feel rushed, meeting deadlines, finishing off projects, or preparing…
It may seem obvious to state that the brand should be properly reflected and showcased in all applications, whether it…
A little while back, I poked at a number of “modern” CSS features and openly evaluated whether or not they…
This article is a sponsored by Storyblok Composability is not only about building a design system. We should create and…
In my previous article, we tackled ribbons in CSS. The idea was to create a classic ribbon pattern using a…
For those involved in digital and physical product development or leadership, consider a Voice of Customer (VoC) program. A VoC…
Effective collaboration between designers and developers is vital for creating a positive user experience, but bridging the gap between design…
Back in the early 2010s, it was nearly impossible to avoid ribbon shapes in web designs. It was actually back…
As an occasionally competent software developer, I love good documentation. It explains not only how things work but why they…
Ever since I started practicing user interface design, I’ve always believed that animations are an added bonus for enhancing user…
Many things have changed in WordPress over the years, but installation has largely remained the same: download WordPress, drop it…
You may already be familiar with the CSS clamp() function. You may even be using it to fluidly scale a…
I’ve been on the lookout for a privacy icon and thought I’d bring you along that journey. This project I’ve…
This article is a sponsored by DebugBear Running a performance check on your site isn’t too terribly difficult. It may…
November tends to be rather gray in many parts of the world. So what better remedy could there be as…
Passkeys are a new way of authenticating applications and websites. Instead of having to remember a password, a third-party service…
My journey in front-end web development started after university. I had no idea what I was going into, but it…
A lot of contemporary usability evaluation relies on easily measurable and readily available metrics like conversion rates, task success rates,…
This article is a sponsored by SpeedCurve Performance work is one of those things, as they say, that ought to…
A group of contestants are asked to complete the following task: Make object1 similar to object2. let object1 = {…
WCAG 2.2 is officially the latest version of the Web Content Accessibility Guidelines now that it has become a “W3C…
Welcome to the second part of the guide to typography in fintech. In Part 1, we reviewed the key points…
Let’s talk about progress indicators — or loaders. It’s true that there are so many tutorials about them and even…
In today’s Smashing Podcast episode, we’re talking about Tech Unions. What part can unions play in a modern tech workplace?…
Gatsby is a true Jamstack framework. It works with React-powered components that consume APIs before optimizing and bundling everything to…
Hi! My name is Daria, and for the last two years, I’ve been working at Devexperts. I have experience creating…
If you don’t know Lieutenant Columbo, I envy you. I wish I could erase my memory and watch this TV…
Even though a simple online search turns up countless tutorials on using Artificial Intelligence (AI) for everything from generative art…
Working with media files in Gatsby might not be as straightforward as expected. I remember starting my first Gatsby project….
The last time we met, I demonstrated how newer CSS features — particularly trigonometric functions — can be leveraged to…
Ask just about any casual user to explain the difference between WordPress.org and WordPress.com, and you’re likely to get a…
In my previous article, I talked about Waterbear, a significant project I worked on as a newly-appointed lead developer, and…
The leaves are shining in the most beautiful colors and pumpkins are taking over the front porches. It’s time to…
In a previous article on CSS-Tricks, I demonstrated how to create a fancy hover effect where an avatar pops out…
Reusable blocks, introduced in WordPress 5.0, allow users to create and save custom blocks that can be used across different…
We’re talking about running grassroots conferences and meet-ups. What does it take to organize a small industry event for your…
This article is a sponsored by Neon Tech Branching off to make code changes is a tried and tested approach…
A few months ago, I worked on what is probably the most remarkable and exciting project of my career so…
To paraphrase a saying that has always stuck with me: “The best animation is that which goes unnoticed.” One of…
Earlier in the first part of the series, we defined inclusivity and how it contributes to enriching the workshop experience….
Smashing Magazine is drastically different today than it was just a few years ago, and you may not have even…
In a previous article, we explored fancy hover effects for images that involve shines, rotations, and 3D perspectives. We are…
Have you ever found yourself trapped in an hour-long meeting, listening to someone’s endless talk without understanding their main point?…
Do you know how box-shadow is sometimes used as a hover effect? It adds depth to something, like a button,…
Joy is pure happiness, looking at your child, getting a surprise birthday party, visiting a family member after a long…
A dear colleague of mine, Jan Philip Pietrczyk, once commented on the developer’s responsibility for writing functional code: “Our daily…
In the previous article, we developed a sentiment analysis tool that could detect and score emotions hidden within audio files….
September is just around the corner, and that means it’s time for some new wallpapers! For more than twelve years…
I woke up one morning in early 2022 and caught an article called “A Whistle-Stop Tour of 4 New CSS…
As a designer, you’re no doubt familiar with the concept of the Double Diamond, that super simple graphical representation of…
The world of post-modern web design is one where the light doesn’t cast many shadows. That doesn’t mean CSS shadows…
You’ve no doubt wrestled with menus that have nested menus before. I can’t count how many times I’ve hovered over…
Let’s start with a fairly common example of a hero component on the homepage of Drupal’s demo installation of the…
Let’s face it. Most of us favor creating new features and user interfaces over maintenance tasks such as code cleanup,…
What is the text over images design pattern? How do we apply this pattern to our designs without sacrificing legibility…
This article is a sponsored by DebugBear There is no shortage of ways to measure the speed of a webpage….
A common assumption in user experience design is less friction makes apps more delightful. But in practice, the happy path…
I work for Bookaway, a digital travel brand. As an online booking platform, we connect travelers with transport providers worldwide,…
We’re talking about headless content management systems. What are they, and how do they differ from more traditional systems? Drew…
We make a series of choices every day. Get up early to work out or hit the snooze button? Double…
Everybody loves a beautiful wallpaper to freshen up their desktops and home screens, right? To cater for new and unique…
CSS is mainly known as a language based on a set of property-value pairs. You select an element, define the…
As developers, we often deal with large volumes of text, and making sense of it can be a challenge. In…
Multilingual content development presents its own set of difficulties, necessitating close attention to language translations and the use of the…
I noticed a charming effect on YouTube’s video player while using its dark theme some time ago. The background around…
Have you ever looked back at your younger self and wondered, “What was I even thinking?” If you have, then…
Why is it so important to take into account older adults? One person in eight on the planet is over…
In this episode of The Smashing Podcast, we’re talking about The Transitional Web. What is it, and how does it…
Is there anything in the front-end world that’s evolving faster than CSS these days? After what seemed like a long…
While the User Experience practice has been expanding and will continue to balloon in the coming years, so have its…
During my time curating the UX London and Leading Design events, I used to watch a few hundred presentations each…
We all agree that 3D effects are cool, right? I think so, especially when they are combined with subtle animations….
The topic of ‘flight search’ has been on our workbench before. Back in 2015, part of us worked on the…
“Sustainable” design is a paradigm that emphasizes the impact that design practices and workflows have on the environment with the…
Often, it’s the little things that inspire us and that we treasure most. The sky shining in the most beautiful…
Design process is messy. You might be following a structured approach, but with all the last-minute changes and overlooked details,…
When it comes to browser DevTools, we all have our own preferences and personal workflows, and we pride ourselves in…
This article is a sponsored by Penpot Among design tools, Penpot holds a special place. It is an open-source design…
Wikipedia is more than a website — it’s perhaps a cornerstone of the World Wide Web. For decades, the site…
I don’t know if you’ve ever used Grammarly’s service for writing and editing content. But if you have, then you…
A couple of years ago, my friend Maria asked me to build a website for her architecture firm. For projects…
In Part 1 of this series, we peeked at how to add i18n to a Gatsby blog using a motley…
“Give them sweet memories.” It was an unexpected suggestion from one of the Smashing event organizers when I asked for…
This article is a sponsored by Wix Personally, I get tired of the antics at the start of any new…
I’m not interested in starting a turf war between server-side rendering and client-side rendering. The fact is that SvelteKit supports…
In this episode of The Smashing Podcast, we ask what is a design manager? What does it take and how…
Internationalization, or i18n, is making your content understandable in other languages, regions, and cultures to reach a wider array of…
“If you don’t want to work within constraints, become an artist.” That is what one of my design lecturers told…
This article focuses on the users of screen readers — special software that converts the source code of a site…
Tables are one of the most popular ways to visualize data. Presenting data in tables is so ubiquitous — and…
Writing programs in JavaScript is approachable at the beginning. The language is forgiving, and you get accustomed to its affordances….
As Artificial Intelligence becomes more widespread and pervasive, the transition to a data-driven age poses a conundrum for many: Will…
This article is a sponsored by iA So, you’ve created a thing. That thing could be anything, say a product…
No doubt you’ve had to style a <select> menu before. And when you do, you often have had to reach…
There’s an artist in everyone. Some bring their ideas to life with digital tools, others capture the perfect moment with…
Creating an effective handoff process from design to development is a critical step in any product development cycle. However, as…
Today, we are very happy to announce our new book: Success at Scale, a curated collection of best-practice case studies…
As software development continues to evolve, so too do the methodologies and approaches used to create it. In recent years,…
In this episode of The Smashing Podcast, we’re talking about Web Platform Baseline. What is it, and how can it…
As someone who has worked with beginner designers for decades, I have observed a certain common problem. They often get…
If you work in software development, you probably know a thing or two about using and maintaining third-party packages. While…
True collaboration to create or maintain a design system is really important to making superb product design, but working with…
Let’s imagine we’re making a small component. It can be anything, really, but let’s use a media object as an…
We often rely on sticky headers to point user’s attention to critical features or calls to action. Think of sidebar…
This article is a sponsored by MacPaw Inc. As someone who wears multiple hats, it is challenging to balance a…
If you are a React developer working on a complex application, you will need to use global state management for…
Programming is fun. At least, that’s the relationship I would love to have with programming. However, we all know that…
Back in the day, developers had to write all sorts of custom code to get different applications to communicate with…
Many years ago, I set my sights on becoming a senior developer. I achieved that goal! I wish I could…
This article is a sponsored by Passwork As businesses rely more on digital services and platforms, the number of passwords…
We’re talking about the process of design. How do you build a process to enable your best work? Vitaly Friedman…
Let’s welcome May with some new wallpapers! For over twelve years, we’ve challenged you, our dear readers, to create wallpaper…
I like to think of writing CSS, like writing functions that describe how your layouts respond to change. When we…
Rage taps are annoying and frustrating. These wonderful occurrences in our interface when we need to tap twice, or sometimes…
Let’s pretend you are interested in trying out Web3 (aka Blockchain or Crypto). You might have experience with various software…
No matter what your stance is on them, no matter what your perspective is on data protection, web advertisement, setting…
Web Workers are a powerful feature of modern web development and were introduced as part of the HTML5 specification in…
This article is a sponsored by Kinsta In this article, we’ll take a swing at creating a stateless Node.js app…
I am currently working on research linked to a project on creating a complete guide to developing a UI kit…
In this episode of The Smashing Podcast, we take a look at design storytelling. What is it, and how can…
In a world of fast-paced action and reactions, quality results are something that we all aim for. But how can…
This article is a sponsored by Feathery.io What is it that causes users to give up on an app before…
Security changes constantly. There’s a never-ending barrage of new threats and things to worry about, and you can’t keep up…
At the start of the Coronavirus pandemic, I led the redesign of a tablet app used by sales representatives of…
New month, new wallpapers! To cater for a fresh dose of colorful inspiration every month, we embarked on our monthly…
The more workshops you organize, the better you realize how similar they actually are, regardless of the methodology or tool…
Many apps have some kind of user-specific information or data that is supposed to be accessed by a certain group…
Many companies organize their workflows around projects and departments. Especially in large companies, work often travels from one place to…
Web apps and e-commerce sites may get all the love these days, but the majority of the web is still…
In this episode of the Smashing Podcast, we ask what is Customer Experience design, and how does it differ from…
Not every project has the budget to spend a lot of money on fonts. But that doesn’t mean that typography…
With the introduction of Next.js 13 and the beta release of the App Router, React Server Components became publicly available….
This article is a sponsored by Neo4j Recently I was chatting with some folks about a book I wrote last…
Exhaustive, sometimes bizarre notes… wireframes… mind-bending blends of art and science. Is it a GitHub repository? No, it’s the life…
We don’t live in an ideal world. Most of us have too much work, too little time, and too small…
More often than not, web engineers always have causes to build out forms, from simple to complex. It is also…
CSS is amazing — I’m regularly surprised at how far it has come in the years I’ve been using it…
This article is a sponsored by Neo4j The explosion of GraphQL over the past few years has introduced many front-end…
Design inspiration! Where do you find interesting websites? Here’s a list of showcases that we frequently visit for inspiration. No…
AI-generated art is everywhere on the web. If you are an active Instagram, Twitter, or Pinterest user, you likely saw…
This article is a sponsored by Storyblok One of the greatest challenges in software development is not in creating new…
We all need a little inspiration boost every now and again. Maybe your secret is to go for a walk,…
This article is a sponsored by Penpot The world of developer tools lives and breathes open-source. Open, free programming languages,…
When it comes to form validation, we can explore it from two perspectives: usability and accessibility. “What’s the difference between…
This article is a sponsored by Storyblok Nowadays, web performance is one of the crucial factors for the success of…
We’ve been passionate about design & UX for years. We’ve written about design systems and usability, inclusive design and product…
This article is a sponsored by Storyblok How much of a language barrier is there still in the 21st century?…
In this episode of the Smashing Podcast, we ask what’s the key to a great keyboard? Is this essential part…
How many times have you heard this when asking about web accessibility? “It’s something we’d like to do more of,…
You can spot them on every other homepage: carousel widgets with auto-rotating content. Those who use them want to show…
Hello! And if you like HTML, you’ve come to the right place! I love HTML. As an old-school front-end developer,…
I can’t imagine the digital world without the magic of storytelling. While I consider storytelling as an art, it is…
It seems natural to use strings to distinguish things. It’s very likely that in your codebase, there are objects with…
This article is a sponsored by Pixo There are plenty of services nowadays that work with photos. Retouched images usually…
It’s fairly common to see designers complain about the poor quality feedback they’ve received from stakeholders or clients. “They literally…
In this episode of the Smashing Podcast we ask how has the design industry changed? Is technology making our work…
In this article, I want to talk about the amazing possibilities of a CSS grid and how it allows for…
What UX podcasts are you listening to? Below you’ll find a few wonderful UX podcasts we came across, as well…
This article is a sponsored by AWS Amazon A good chunk of all websites out there runs on Amazon Web…
Since Next.js 13 release, there’s been some debate about how stable the shiny new features packed in the announcement are….
As designers we usually turn to different sources of inspiration, and, well, sometimes the best inspiration lies right in front…
This article is a sponsored by Gong.io Perhaps this is a controversial statement, but I hate it when UI and…
Scalable Vector Graphics (SVG) have been a staple in Web Development for quite some time, and for a good reason….
Nurturing connections with your customers is one of the most effective ways to gain valuable insight into their experiences with…
Design should never be a trade-off when it comes to creating an accessible web. There are many features coming to…
This article is a sponsored by Maze Although you might be able to map out the development of a new…
When we make purchasing decisions, we often rely on expertise from people like us who happen to have purchased that…
There’s a type of cognitive dissonance that haunts designers: the genuine desire to be truly innovative and original whilst simultaneously…
In this episode, we ask whether technology is making us redundant; will we all soon be replaced with AI? Vitaly…
Using :has() gives us the ability to “look ahead” with CSS and style a parent or ancestor element. Then, we…
When developing a new feature, what determines whether an existing component will work or not? And when a component doesn’t…
Living in a highly extroverted world, everyone is expected to outshine the rest to succeed and grow. Meeting people, talking,…
Auto layout is driving you bananas? You’re scared about what will happen with your design in the browser? Then our…
This article is a sponsored by Swimm Everything surrounding software documentation is tough — from allocating time to do it…
Largest Contentful Paint (or LCP) is one of three metrics of the Core Web Vitals. These metrics are used by…
Over the past 12 months, we continue to see new free and open-source projects shared around the developer community. In…
When we think about closed captioning, we often think about noisy environments, be it busy restaurants, shopping malls, or airport…
This article is a sponsored by UXPin Is it controversial to say deep integration of design systems, removing the need…
There is a strange ritual that web developers around the world have been perpetuating from the dawn of computers to…
Data visualizations are everywhere; from the news to the nutritional info on cereal boxes, we’re constantly being presented with graphical…
Many projects start with assumptions. We assume that users understand hamburger icons and how mega-menus work; that they understand how…
The new year is the perfect occasion to tidy up your desktops and home screens and start on a fresh,…
When I wrote my previous tutorial about the extended use of the CSS clamp function, I was surprised by the…
A spatial system is a set of design guidelines about spacing, sizing, and dimensions of user interface components. It is…
Allow me to preface this article by saying that I’m not a terminal person. I don’t use Vim. I find…
Localization is one of the most interesting fields in terms of user interface: text length may be different depending on…
This article is a sponsored by Extensis This article is ideal for your lunch break. It highlights five quite straightforward…
As a sole design system maintainer, I try to minimize the time I spend in Slack or meetings and maximize…
There is a multitude of ways to do anything on a computer — and some are faster than others. As…
This article is a sponsored by Flatfile With the explosive growth of cloud computing over the last decade, unprecedented volumes…
In Part 1, we explored general patterns of creating responsive and accessible tables depending on the design, use case, and…
Q. Did any part of your education require you to read the building regulations?A. No, I don’t recall, but I…
This article is a sponsored by STUDIO For years, reports have been warning of technology taking away jobs, particularly in…
What is privacy? What exactly does it mean? How do we consider, manage and maintain privacy? And how dow do…
Maybe you’ve already seen some tech advent calendars pop up in your timelines and feeds? Or perhaps you’re already following…
Tables allow us to organize data into grid-like format of rows and columns. Scanning the table in one direction allows…
Before we start with a deep dive into the details and the anatomy of a component, let’s start at a…
What if we were able to implement the sizes of designer’s contribution without hassle? What if we could set custom…
2022 is slowly but surely coming to an end. And, well, could there be a better way to welcome the…
If you’ve been working with JavaScript for a while, you may be fairly familiar with DOM (Document Object Model) and…
Single Page Applications (SPAs) can provide a rich, interactive user experience when dealing with real-time, dynamic data. But they can…
In the previous article, we talked about how to improve accessibility for keyboard users using HTML and CSS. Those languages…
In this episode we’re talking about User Journey Mapping. What is it, and how does it help us build better…
This article is a sponsored by Storyblok Today, creating content on the Internet is the norm, not the exception. It…
A cursory google search will return a treasure trove of blog posts and articles espousing the value of adding accessibility…
Keyboard accessibility is an important part of the user experience. There are multiple criteria in Web Content Accessibility Guidelines (WCAG)…
Many millions of people dream of flying the coop and spending time working abroad. The opportunity to work abroad is…
Design systems ensure alignment, reusability, and consistency across a project or brand. And while we have gotten very good at…
October has come and gone, and with it, Next.js has released a new major version packed (pun intended) with tons…
We surf the web daily, and as developers, we tend to notice subtle details on a website. The one thing…
It used to be the norm that businesses were opaque, with employees only having access to what they needed to…
You might know it already, but perhaps not yet: we regularly run friendly online workshops around front-end and design. We…
Full-Site Editing is one of the main improvements added to the WordPress platform with version 5.9. It allows users to…
To many of us, privacy might feel like a complex, abstract concept. We can’t hold privacy in our hands, we…
I can’t believe it’s already been nine months since I last wrote about the new DevTools features across browsers! You…
I run the yearly State of CSS survey, asking developers about the CSS features and tools they use or want…
This year, I joined the team and helped design the survey together with the community which led to a number…
Simply defined, the concept of typographic hierarchies refers to the visual organization of content in terms of their relative importance….
In this article, I’m going to explain how to implement motion controls in the browser. That means you’ll be able…
November tends to be a rather gray month in many parts of the world. So what better remedy could there…
This article is a sponsored by Neo4j GraphQL enables an API developer to model application data as a graph, and…
When it comes to complex navigation on mobile, we often think about hamburger menus, full-page overlays, animated slide-in-menus and a…
Media queries are a great concept. Building a complex structure in an HTML document and adapting it for various devices…
I often come across front-end developers, managers, and teams facing a repeating and legitimately difficult dilemma: how to organize their…
“Do I use a <section> or an <article> element?” I have had to ask myself this question an unhealthy amount…
Design is one of those disciplines that has a very low barrier to entry, and this is amazing! What isn’t…
Last month, we hosted our first offline + online conference in San Francisco. It was also our first in-person conference…
In recent years, the web development community has rightfully spread the message widely that images are often the largest resource…
If you think that static rendering is limited to generic, public content that is the same for every user of…
In software development, UX designers and software engineers can get locked in verbal combat, which feels like a chess game…
Imagine the following situation: you start working on a new project, maybe also with a different programming language you’re not…
In this episode, we ask what qualities are required to introduce change in large organizations, how to convince management to…
This article is a sponsored by Progress Kendo UI Designing and building data tables that handle large amounts of data…
In the developer community, it is very common to see new frameworks and tools appear every day. Some of them…
Ask a handful of people about the metaverse, and you’ll get a dozen different responses ranging from a virtual land…
Have you heard the claim that designing for accessibility leads to a better outcome for everyone? Here’s a story about…
Imagine that you need to design a pricing page. The page is intended for a product that has four different…
Localizing your site can benefit your business or organization in several ways. By translating your content or site, you expand…
You can incrementally advance corporate UX maturity by conducting user research, designing new features, and repairing existing ones while emphasizing…
Starting off the new month with a little inspiration boost — that’s the motivation behind our monthly wallpapers series that…
In this episode, we ask if Sass is still relevant in 2022 and if it adds any value modern CSS…
After the release of Gatsby 4, the Gatsby team saw the biggest rise in signups on Gatsby Cloud. According to…
Digital accessibility tends to be taught through the lens of how your experience works (or fails to work) with a…
In Part 1 of this article, we developed a web component for an interactive Gantt Chart. Now we will enhance…
As both an entrepreneur and designer, I understand the ways startup founders think. Most of them start a project with…
We often focus on the latest techniques and tooling, trying to optimize our workflows and processes. However, in the end,…
I previously viewed animations as something playful. Something that adds fuzziness to interfaces. Apart from that, in good hands, animation…
The table is one of the most painful components designers have to deal with in their daily design lives. The…
They say we are entering the Data Age. There’s certainly enough of the stuff about. Between analytics, public records, and…
When we talk about accessibility, we tend to talk about many things — such as dark mode, keyboard navigation, prefers-reduced-motion,…
My site has been created using a static site generator and deployed to a CDN, so I’m super happy with…
Embedded systems mean different things to different people; they can be standalone and independent, working by themselves, or be a…
Every day, millions of Ukrainians show incredible courage and strength resisting Russian aggression. Volunteers, individuals and organizations are working together…
In the first part of this article, we saw that measuring and comparing typefaces is not a simple task. Testing…
Frontend build tooling is crucial to the workflow of the modern frontend developer for a host of reasons classified under…
There’s a reason for all the new, experimental color features CSS is introducing. And there’s a reason for all the…
Technological development is an iterative process. One might assume that any engineer has at least a rough idea of how…
The Jamstack approach originated from a speech given by Netlify’s CEO Matt Biilmann at Smashing Magazine’s very own Smashing Conf…
Our focus is on typefaces for reading large amounts of text and information in the most efficient, legible, pleasurable, comprehensible,…
Chat is becoming an increasingly popular communication medium in both business and social contexts. Businesses use chat for customer and…
You’ve spent months putting together a great website design, crowd-pleasing content, and a business plan to bring it all together….
There’s an artist in everyone. Some bring their creative ideas to life with digital tools, others capture the perfect moment…
In this episode of the Smashing Podcast, we ask why accessibility really matters and why it is so important to…
Have you ever looked to see what other tools were available to you within the DevTools toolbox? You’re probably using…
In February 2021, I began studying 3D illustration using Blender. Like most beginners in the field of 3D design, I…
There’s certainly no shortage of design systems available to use when building your next project. Between IBM’s Carbon, Wanda and…
Memory and performance management are important aspects of software development and ones that every software developer should pay attention to….
The notion of onboarding is all about helping users quickly and easily find value in your offering. Speed and ease…
After reading Louis Lazaris’ insightful article “Those HTML Attributes You Never Use”, I’ve asked myself (and the community) which properties…
These days it seems there are an endless number of tools and platforms for creating your own blog. However, lots…
Kubernetes, also known as k8s, was coined by a Google engineer in mid-2014 and is now widely used throughout the…
Creating advanced CSS animations is great for UX and design purposes. You can make an interactive website that pleases the…
What does it take to design a new website in 2022? Well, it’s possible to break this process into a…
In this episode, we ask how one man can go from designing websites for local bands to heading up Google…
In the world of HTTP Headers, there is one header that I believe deserves more air-time and that is the…
Let us start with a simple explanation of the word “task”. A task is something someone wants to do using…
In recent years, frameworks have taken over web development, and React is leading the charge. These days it is fairly…
Sunuva is a global fashion brand for kids established in 2007. Today, their products are featured in famous luxury store…
SVGs have become more and more popular in the past few years. For good reasons. They are scalable, flexible, and,…
First of all, it would be remiss of me to give the Chrome browser all the credit here, when the…
We need more good feedback in our world, and I don’t just mean the type of feedback that celebrates your…
In the last couple of years, our industry has figured out how to make use of cloud infrastructure and flexible…
Imagine that you’ve just arrived in Tokyo. Full of impatience and excitement, you are just about to hit the road,…
Every now and then, someone will ask for my recommendations on UI frameworks. By “UI framework”, I mean any third-party…
We always try our best to challenge your creativity and get you out of your comfort zone. In all these…
Great user experience starts with a page that loads instantly. The average user doesn’t spend much time waiting for a…
I have a confession to make — I am not overly fond of modal dialogs (or just “modals” for short)….
Imagine that you’ve just received an invite to a new meeting. The description is a bit vague, but the title…
Let’s take a moment to think about the time you’ve spent navigating intranets, password resets, project management software, or government…
One of my main mantras is using “Creative Coding” to level up your skills. It’s one of the main reasons…
Thousands of tools for the command-line interface (CLI) are out there, without exaggeration. They serve all kinds of purposes. Yarn…
When designing interfaces, we often focus on the usual suspects. How do we design better mega-menus and carousels? How do…
Sometimes it’s the little productivity hacks that turn out to be the most precious. A shortcut or tool that saves…
In the early days of the Jamstack, developers mostly used it for static sites and opt for a more verbose…
I’ve spent the past several years building messaging tools — for more than three years now I’ve been leading the…
As human beings, we love stories. And stories come in all shapes and sizes. Children love fairy tales; teenagers ask…
Using freelancers has always been a somewhat divisive subject. Freelancers can be a helpful addition to any team when used…
Carousels don’t have a good reputation, and rightfully so. They have plenty of accessibility issues, they often exhibit low click-through…
It can be easy to assume that everyone needs a design system, that you can pick one off the shelf…
JavaScript, CSS, images, iframes, and other resources impact how quickly website loads, renders and becomes usable to the user. Loading…
Next.js has five types of data-fetching patterns for determining how you want content to be seen in your application: static-site…
Nobody gets particularly excited about breadcrumbs navigation. You know, those tiny little crumbles of pathways that illustrate where a user…
In these difficult times, we all are Ukraine. Today we would like to highlight a wonderful initiative from the community:…
A long time ago, in a galaxy far, far away, I could build a website from beginning to end by…
Most sites I build are static sites with HTML files generated by a static site generator or pages served on…
“Middleware” isn’t a new term in computing. It is often used as a term to describe a piece of software…
For more than eleven years now, we have stuck to our little tradition of welcoming the new month with a…
We’ve all been there. You might have a long-winded list of search results, products, orders or data entries. Of course,…
At Smashing, we love the web. That’s why we publish articles and books, run workshops and events around everything web….
In these difficult times, We all are Ukraine. If due to the ongoing war in Ukraine, you need a design…
The Internet is filled with a lot of interactivity, and more often than not the way we choose to show…
Around six months ago, Remix became open source. It brings a lovely developer experience and approximates web development to the…
In January, Madison Kanna asked her Twitter followers: What are the languages/tech you’re excited to learn or learn more deeply…
Imagine a shiny newsletter pop-up. A pop-up makes its splendid appearance on an eCommerce site just as you are about…
I’m extremely excited about the upcoming Forced Colors media query. It takes the work done for Windows High Contrast mode…
What’s different about the file uploader we’re building in this article versus the previous one? The previous drag-and-drop file uploader…
Design trends come and go, and just a fraction sticks around longer than others. Flat design and its more popular…
Big tech companies have the ability to make thousands of releases per day. Already back in 2011, Amazon released new…
How often have you searched for apps in a certain category and considered downloading one below the first three or…
When you start building a cloud-based back-end system for your application, you have a choice, on the one hand, to…
Last week in Part 1, I explained how the idea about how to record audio input from users and then…
In my last article, I suggested using the SaveData API to deliver a different, more performant, experience to users that…
This is not a regular Smashing article. But these aren’t regular times either. I was born and grew up in…
When creating the information architecture of a website, users are often overlooked in favor of internal politics and organizational thinking….
It’s now been more than two years since the Samsung Galaxy Fold and Surface Duo were introduced to the world….
A while back I got approached by friend Kent C Dodds to help out with his site rebuild. Besides adding…
Container queries enable us to style an element depending on the size of its parent — a crucial difference from…
In theory, everybody has a relatively similar concept for what a “Design System” means, though nuances start showing up as…
How would you measure performance? Sometimes it’s the amount of time an application takes from initial request to fully rendered….
WordPress 5.9 was released recently shipping with Full Site Editing (FSE), which enables using blocks to create the layout for…
I work for Readymag, which makes a browser-based design tool that helps people create websites, portfolios, and all kinds of…
In this episode, we’re talking about Responsible JavaScript. What does it mean for code to be responsible, and how should…
Picture this situation: You’re approaching a deadline fast, and you’re using every spare minute to achieve your goal of finishing…
Markdown is second nature for many of us. Looking back, I remember starting typing in Markdown not long after John…
Inspiration can come from unexpected places — the conversations we had, the dots we’ve connected in our minds and the…
Matt Mullenweg (creator of WordPress) has expressed interest in having the WordPress editor comply with the Block Protocol, a recently-released…
Voice is a powerful tool that we can use to communicate with each other. Human conversations inspire product designers to…
Amid the KPIs and e-commerce and seemingly endless analytics, there are still plenty of sites embracing frivolity. Doesn’t it take…
When I started writing Touch Design for Mobile Interfaces, I would regularly find an interesting topic or tangent that led…
In 2016, I released the first version of the tool, then called not Statoscope, but Webpack Runtime Analyzer. That was…
QR codes are a useful technology that simplify and enrich the customer journey. The technology is currently used almost everywhere:…
Last week, we looked at the different benefits and costs of using frameworks, starting from the point of view of…
The COP26 climate conference has thrown into a sharp light the importance of reducing carbon emissions in every area of…
Projects built using JavaScript-based frameworks often ship large bundles of JavaScript that take time to download, parse and execute, blocking…
How do we design for touch in 2022? Mobile and touch are the new default for computing, but there are…
Time flies… The first month of 2022 lies already behind us, and with February just around the corner, it’s time…
I have recently become very interested in comparing frameworks to vanilla JavaScript. It started after some frustration I had using…
“We sometimes underestimate the influence of little things.” — Charles Chesnutt It lives in the deepest and darkest corners of…
In September last year, I wrote about some of the latest updates in our beloved DevTools, across Firefox, Chrome, Safari,…
CSS recently turned 25 years old, and over that time, many techniques and tools have been created to help developers…
In many of the teams that I have joined in the past, I have found a situation similar to the…
If you have ever built React applications that use asynchronous data you probably know how annoying it could be to…
You might already know it: We regularly run friendly online workshops around front-end and UX. And, well, we have a…
Whenever we visit new places, we often need to quickly navigate and find the right direction. As a result, wayfinding…
The concept of fluid typography in web development has been present for years, and developers had to rely on various…
Since you’re probably coming from Part 1, you may already know that I’ve been living and breathing user interface and…
An online web code editor is most useful when you do not have the opportunity to use a code editor…
I’m currently the Head of Services at Fable, a company that connects organizations to people with disabilities to make user…
CSS gradients are a useful CSS feature that can be used to create interesting UI effects or even help us…
Companies can often carry their products into the future with a “feed the machine” mentality. To meet customer demands they…
I’ve been living and breathing user interface and product design for just over a decade now, and although I’ve had…
Working as a designer on a design system for a large product has taught me how precious the time you…
Let’s welcome 2022 with some new wallpapers! After all, the new year is the perfect occasion to tidy up your…
I am sure you have read unrealistic articles that suggest there is some scientific approach to pricing that will magically…
Gatsby is an open-source framework built on top of React. With Gatsby, you can pull data from (almost) anywhere and…
As one of the maintainers of a UI component library, I’ve implemented and styled myriads of input elements. One day…
What does it take to create meaningful user experiences? While there’s no one secret recipe for success, there are some…
“Why are my Core Web Vitals failing?” Many developers have been asking themselves that question lately. Sometimes it’s easy enough…
A human-machine interface (HMI) is an interface that allows us to interact with a digital system. No matter what HMI…
To follow the steps in this tutorial, you should have the following: a Stripe account (you can create one for…
The personal computer (PC) is still assumed to only be used at a desk-like workstation, in discrete sessions of work…
There are various methods to modify headers. You can modify headers by using browser extensions or proxy apps (such as…
With the holidays just around the corner, what better way to celebrate than with some free goodies? We sifted through…
Why are “click here” and “by this link” poor choices? And is it acceptable to use “read more”? All these…
Once again, the web community has been busy with creating some fantastic advent calendars this year. As you’ll see, each…
Front-end developers have to interact with private or public APIs whose method of authorization requires a secret key/API key that…
In this episode, we’re asking if changes to best practises over the last year have negatively impacted the web. Is…
Slowly but surely, 2021 is coming to an end. And, well, could there be a better way to celebrate the…
Naming things is hard, right? Well, “Flippy Snaps” was the best thing I could come up with. 😂 I saw…
Maintaining a large application is always a difficult task. It might have outdated dependencies which can cause maintainability issues. It…
A map that blends past and present, a musical time machine bringing back distant memories, or an interactive graphic novel…
Dyslexia is perhaps the most common learning disorder in the world, affecting somewhere between 10–20% of the world’s population. It…
For many of us, personal workspace can feel quite comfortable and convenient, but nobody really wants to sign up for…
A website’s performance can make or break its success, yet in August 2020, despite many improvements we had previously made,…
A “wildcard”? What in the world? Great question, these types of domain stem from Wildcard DNS Records which look like…
There’s more to color on the web than meets the eye, and it’s about to get a lot more interesting!…
Mobile and touch are the new normal for computing, but there remain a lot of myths, rumors, errors, bias, and…
Many modern programmers, including front-end and full-stack developers, work daily with the command line. Even those who are relatively new…
Hooks are simply functions that allow you to hook into or make use of React features. They were introduced at…
Even if it’s a blessing in disguise, discarding elements of your work is no fun. Tossing out suboptimal parts of…
Instructing Next.js your app intends to have routes for different locales (or countries, or both) could not be more smooth….
So, you want to give personality to your site by making it stand out from all other websites out there….
As developers, we rightfully obsess about the customer experience, relentlessly working to squeeze every millisecond out of the critical rendering…
UX design teams are passionate about our approach to solving problems and providing users with experiences that lead to their…
In this episode, we’re talking about Astro. Will this modern static site builder launch you into the stratosphere? Drew McLellan…
One of the main benefits of GraphQL is the client’s ability to request what they need from the server and…
If you’ve been looking for a clear explanation of how applications can be developed and deployed to AWS with less…
When dealing with e-commerce at some point, you probably have heard, and perhaps used Magento, an open-source e-commerce platform. However,…
A bit of colorful inspiration is always a good thing, don’t you think so? Especially in November, when the days…
I believe that copywriting is the most valuable skill you’ll ever learn. Great copy engages your readers, builds connections, turns…
Have you ever been in a position where you need to intimately know the market for a particular product? Maybe…
The eye-tracking methodology can be extremely valuable for usability tests since it records the journey without interfering with the users’…
In this article, we will go through how to optimize and build a high-performance Next.js application using Nx and its…
We’re not always able to load different-sized images for an HTML element. If we use a width and height that…
In this article, I will explain how to use Quasar Framework and its state-of-the-art UI (which follows Material guidelines) to…
As the pandemic lingered, the suddenly-remote team I work with became increasingly foosball-deprived. I thought about how to play foosball…
When working with motion on the web, it’s important to consider that not everyone experiences it in the same way….
After working on a coding project for a good couple of hours, many developers like myself tend to hit a…
I don’t know about you, but I’ve been overwhelmed by all the web development tools we have these days. Whether…
You’ve probably heard about Serverless Functions, but if you haven’t, Serverless Functions provide functionality typically associated with server-side technologies that…
In this episode, we’re talking about DevOps. What is it, and is it a string to add to your web…
Fairprice is one of the largest online grocery stores in Singapore. We are continuously looking out for areas of opportunities…
When a company’s digital representation lacks a dedicated UX/UI design team, it can be hard to produce something that stands…
It’s incredible to see what we can do with CSS today, especially if you still remember how difficult it once…
There are fantastic video courses out there, yet online workshops are just different. You can always ask a question live,…
Have you ever used React.createElement directly? What about React.cloneElement? React is more than just transforming your JSX into HTML. Much…
In the past couple of years, it’s no secret that our design tools have exponentially evolved. With many having great…
A newspaper sign-up form had fields for name, email, and password. So, I started typing on the name field, and…
In this article, you will learn how to use the AnimXYZ toolkit to create unique, interactive, and visually engaging animations…
Creating an interactive experience with fiction can be a chore with traditional content management tools. Writing the prose, creating the…
In the fight against the COVID-19 pandemic, scientists are tirelessly working on vaccines and medicine against COVID-19 in laboratories. In…
We’ve all been there, at the end of completing CSS for a layout and — what’s that? Ah! An extra…
This article is for anyone struggling with testing cloud services locally, and specifically for people wanting to locally test an…
One of the use cases for using CSS Grid is to display a gallery of images, but a gallery on…
Giving users the ability to quickly search through and navigate our content easily comes with great benefits. This not only…
Inspiration lies everywhere. In the fall leaves shining in the most beautiful colors these days, in the misty mornings and…
Images are the most popular resource type on the web and are often the largest. Users appreciate high-quality visuals, but…
Markdown is a small text to HTML conversion language. It was created by John Gruber in 2004 with the goal…
Software development without automated testing is hard to imagine today. A good variety of different test procedures will ensure a…
At our company, Unplatform, we have been building e-commerce sites for decades now. Over those years, we have seen the…
Disabled buttons. Infinite scroll. Poor inline validation. Parallax. Carousels. Modals. Mega-dropdown hover menus. There is plenty of frustration on the…
I don’t know about you, but I love it when new CSS properties arrive that make our daily lives as…
There are plenty of ways to detect performance bottlenecks and audit CSS. We can look into common performance bottlenecks and…
Once upon a time, in the magical land of Software development, there was a young developer, your humble servant, discovering…
Several years ago, I wrote about website builders for a living. Yes, that’s a thing. Back then there seemed to…
We think of web scraping as a tool used to harvest web content for information analysis purposes, sometimes to the…
In this article, I’ll be explaining how I’ve used Gatsby Functions and the Stripe API to enable secure “Pay what…
As a chemist by trade, I received a Master’s degree in Quality Management and Quality Control from Bordeaux University. My…
Most businesses today rely on simple brochure websites for their online presence. These tend to be static websites with a…
Per the W3C spec, “a pseudo-element represents an element not directly present in the document tree”. They have been around…
Need to design something? It can be tempting to start with a computer-based tool, e.g. wireframing software like Balsamiq, or…
There’s no middle ground between simple transitions and complex animations. You’re either fine with what CSS Transitions and Animations provide…
A lot of web design talk concerns itself with what goes on around content. Page speed, design systems, search engine…
If you’ve ever used Incremental Static Regeneration (ISR) with Next.js, you may have found yourself sending stale data to the…
In the real world, content often differs vastly from the neat, perfectly fitting content presented in designs. Added to that,…
Browser developer tools keep evolving, with new and improved features added all the time. It’s hard to keep track, especially…
Hello, and welcome to the final installment of this three-part series on the new HTTP/3 and QUIC protocols! If after…
As is the case with many other developers, the reports over the last few years of the huge energy requirements…
Because this industry moves so quickly, learning new skills is a regular thing for most of us. Over the last…
Even today, the magic, wicked realm of SVG Filter Effects is largely uncharted territory. The art of SVG filtering is…
This article is intended to be used as a primer for managing complex states in a Next.js app. Unfortunately, the…
September is just around the corner, and, well, that means… it’s time for some new wallpapers! Since more than ten…
In previous articles from this series, we’ve covered auditing CSS codebase health and the incremental CSS refactoring strategy, testing, and…
Compound components help developers build more expressive and flexible APIs to share state and logic within components. This tutorial explains…
At the ripe old age of 25, nytimes.com is now older than some of the people who work building it….
To make the development experience faster, I moved all the PHP packages required by my projects to a monorepo. When…
To get the most out of this tutorial, you should be familiar with: Git, GitHub and Linux and the command…
Welcome back to this series about the new HTTP/3 protocol. In part 1, we looked at why exactly we need…
The world’s first website was made from static HTML files created in a text editor. While it looks unassuming, it…
Ethics are an important part of human-computer interaction because they keep people at the heart of the design process. Unethical…
If you work with time data in your app, a graphical visualization as a calendar or Gantt chart is often…
It’s incredible to see people from all across the world putting all their love and lots of hours into something…
When people have an idea for a piece of software or an app, they tend to be pretty energized about…
There are literally thousands of Figma plugins out there. Which ones do you use? How often do you use them?…
In this article, we are going to walk through mounting and unmounting of navigation routes in React Native. An expected…
When we implement websites today, we are confronted by a lot of things we need to take care of. Ideally,…
In this episode, we’re talking about designing for safety. What does it mean to consider vulnerable users in our designs?…
You may have read some blog posts or heard conference talks on this topic and think you know the answers….
Which param is the array and which is the callback in PHP functions array_map and array_filter? I can never get…
Imagine a world in which every button is disabled by default. Usually it’s grey, subtle and slightly out of focus,…
The most obvious and common prop that developers work with within React is the children prop. In the majority of…
SVG Optimizer (SVGO) is a popular open-source tool that is used to minify SVG files. It works by “safely removing…
localStorage is one of the two mechanisms of a browsers’ web storage. It allows users to save data as key/value…
Accelerated Mobile Pages, or AMP, is an open source web components framework that increases the speed of loading webpages. AMP…
As your organization grows, it’s common for multiple API services to be created, each one providing its own feature set….
Things on the web can break — the odds are stacked against us. Lots can go wrong: a network request…
If you’re familiar with Gatsby, you’re probably aware of how fast it is and how it improves the overall development…
A/B testing is a common way for developers and product teams to understand how users engage differentially with their tools….
In unit testing, developers test individual functions, methods, modules, and packages to verify their correctness. Unit testing helps to find…
Introduction Authentication is an important feature in web applications today, but many developers have difficulties setting it up. Thankfully, there…
In Part 1, we’ve covered the side effects of low-quality CSS codebase on end-users, development teams, and management. Maintaining, extending,…
Starting as a software developer, it’s recommended to follow a more pragmatic approach to developing software. As time goes on,…
React is very simple and efficient for creating large applications. React Native enables you to use React to build mobile…
A changelog is a detailed record of any changes you’ve made to your project over a period of time. Not…
Performance is a crucial factor for any app or product, and multiple factors impact it. Generally, when you build apps…
Nowadays it’s essential to have an online presence when running a business. A lot more shopping is done online than…
Frameworks are great for modularizing your code, breaking down reusable components into a separate bundle of code. For example, consider…
If you’ve had to work on an application where more than two components with different ancestry had to share the…
Introduction What is React.cloneElement()? React.cloneElement() is part of the React Top-Level API used to manipulate elements. It clones and returns…
The slider is one of the most common UI elements on the web and in mobile applications. Used to select…
When we start learning CSS, we find that CSS units of measurement are categorized as relative or absolute. Absolute units…
When you think about Node.js, XML probably isn’t the first thing that comes to mind. But there are cases where…
Three.js is the most popular 3D WebGL library, powering countless 3D experiences like landing pages, VR rooms, games, and even…
Words are important. They have meaning, and putting certain words side-by-side allows us to convey information to others. The same…
Autocomplete is a feature that suggests words or phrases that complete a user’s initial input. In this article, we’ll build…
When it comes to creating applications, aesthetics, font choice, and the overall look and feel of an app drives whether…
First of all, don’t do this at home. Do not write your own dialogs or a library to do so….
Google created Flutter to simplify the way we create apps, making it possible for our apps to run on different…
An image picker is one of the most widely used components in any app. Many popular apps, such as Facebook,…
The aim of this post is to examine how frontend developers build fast landing pages, as judged by Core Web…
Over the years, navigation bars, or navbars, have become a staple feature in building websites. They really come in handy…
I have had a great experience using Next.js to manage complex front-end projects. Next.js is opinionated about how to organize…
Tailwind CSS is a collection of opinionated CSS utility classes that aims to make your life as a developer easier….
Writing raw SQL in your API is so passé, or at best it’s reserved for really complex queries. These are…
Sidebar menus are a great feature for the user interfaces of web and mobile applications. Not only do sidebar menus…
Introduction Traditionally, Node.js does not let you parse and manipulate markups because it executes code outside of the browser. In…
Gatsby recently announced the launch of Functions which opens up a new dimension of possibilities — and I for one…
Data visualization has always been an important part of software engineering and frontend development in particular. There’s always a need…
As the name suggests, the Google Sheets API lets you connect an existing spreadsheet, parse its available data, and pass…
As a software developer who started my career with Java, I had issues during my transition to JavaScript. The original…
I know, testing can seem like a waste of time for many developers. You hate it, right? But, should you?…
Without a doubt, word-of-mouth recommendation is an incredibly desirable way to win work. It requires zero marketing efforts and typically…
React Native is an amazing library for developers looking to build mobile apps with speed. It provides an efficient way…
Tabs are user interface components that render and display subsections to users; they arrange content into categories for easy access…
Many of us — myself included — may not realize how their time is spent each day. Some of the…
The AppBar widget is essential for any mobile app. It is used to show important information such as the page…
Whether it’s your portfolio website or a SaaS product website, you need a dedicated contact page for visitors and potential…
Scroll restoration is a feature that we tend to take for granted. With traditional HTML-based pages and navigation (i.e., server-rendered…
An exciting feature is shipping with TypeScript 4.4. It’s called control flow analysis of aliased conditions, which is quite a…
If an element and its parent have an event handler for the same event, which element will fire first when…
Today, we’re shining the spotlight on color tools and resources for all kinds of projects, from all types of color…
Introduction According to the Cambridge dictionary, to decorate something means “to add something to an object or place, especially in…
Markdown format is a longtime staple of the developer community. Since 2004, we have been using Markdown to create content…
According to Wikipedia, a context menu (also called right-click menu) is a menu in a graphical user interface (GUI) that…
Meta tags are special HTML tags that offer more details about your webpage to search engines and website visitors. As…
Most modern applications require communication across multiple services, and JSON is one of the most popular notations for storing and…
In this modern area of JavaScript-powered web pages, the DOM can be an expensive abstraction. Without the right tools to…
WordPress is the most used website builder in the world; almost half of the web has used WordPress to create…
Introduction Dependency injection is a great pattern to use while building large and complex applications. The major challenge with building…
Drag-and-drop has been around since most of us started using computers. We use the drag-and-drop feature in the Gmail app…
Type coercion, type conversion, typecasting, and type juggling: all different names that refer to the process of converting one data…
This post is written by a JavaScript developer just entering the world of Rust. A JS background isn’t required to…
Testing is a critical part of any developer’s workflow. It helps us to ensure that our project is going to…
Applying box shadows in a React Native app is not always straightforward. Because developers must build for both Android and…
With so many options, it’s easy to get overwhelmed when choosing a state manager for your application. It seems that…
In this tutorial, we’ll show you how to use React Native Debugger to — you guessed it — debug React…
JavaScript frameworks like React, Angular and Vue have a very bad reputation when it comes to web accessibility. But is…
React component libraries are becoming increasingly popular, and for good reason. They are great tools that guarantee consistency and reusability…
As a tech head, you’re probably aware of virtual reality and its various applications. Video games, web and mobile apps,…
There are many libraries available for creating and managing forms. In React, forms have always been a bit complex. Form…
Data grids, also known as data tables, are essential in presenting massive amounts of data to users. Users should be…
As we move towards a better and more accessible user experience on the web with every passing day, dark mode…
If you have a Node.js GraphQL endpoint on your project’s backend with various resolvers, and if you have it deployed…
This article addresses an important issue in software development projects: keeping dependencies up to date. Updating dependencies closes potential security…
If you’ve been dabbling in the Jamstack/page rendering/Next.js world, chances are you’ve heard of the terms “Incremental Static Regeneration” (ISR)…
A while back, I began working on a side project called taggr, a completely offline, interactive photo exploration app. Developing…
Inheritance occurs in real life. Children inherit their parents’ features: tall parents are likely to have tall children and vice…
If you’re reading this blog post, there’s a very good chance you’ve probably cloned a git repository from GitHub. One…
Filters are everywhere. While we often think of them appearing when booking flights or shopping online, filters are frequently used…
As we know, React is a free and open-source JavaScript library written by Facebook to create highly dynamic web UIs….
The accordion menu, also called an expansion panel, is a feature that allows users to toggle between hiding and displaying…
Applications are commonly required to deploy to many different environments, including staging, testing, and production, without building environment-specific artifacts. Methodologies…
Node.js has gained a lot of popularity in the past few years. It is used by big names like LinkedIn,…
Most apps have to perform network requests over the internet. As such, it’s important to handle network calls elegantly to…
According to Evan You, the creator of Vue, petite-vue is an alternative distribution of Vue inspired by Alpine.js that is…
The Intersection Observer API is a Javascript API that enables us to observe an element and detect when it passes…
TypeScript has the ability to define classes as abstract. This means they cannot be instantiated directly; only nonabstract subclasses can…
When jQuery appeared in 2006, a lot of developers and organizations started to adopt it for their projects. The possibility…
Error handling is essential for the success of every application, ensuring end users can easily navigate through the app and…
Introduction You can achieve a basic hover event in React by using the native CSS :hover selector, but there are…
CSS is a simple stylesheet language for defining a website or document’s presentation. However, this simplicity leaves the door open…
Firebase Cloud Messaging (FCM) is primarily known for simplifying the process of sending a notification to client devices. In this…
As someone who’s created countless CSS animations, one thing I’ve always missed is elastic ease for keyframes and transition. Yes,…
With an increase in the amount of mobile app development frameworks available, the introduction of Vue Native in 2018 gave…
Visitors to your application and website expect a user experience that is tailored to their device. A bad user experience…
This article covers the reasoning behind using the dangerouslySetInnerHTML property in a React application, which is the equivalent of the…
A little over 10 years ago, Google bought a smaller company called GIPS for a bit less than $70 million….
Imagine yourself as someone with a visual disability. Cataracts, or totally blind even. A site is not accessible because of…
Before we begin this tutorial, we will first have to understand what Prisma is, and why it is a good…
Location, defined by latitude and longitude, can be used in conjunction with other data to generate insights for a business,…
Next.js, the React framework by Vercel, has continued to grow in popularity as more React developers pursue server-side rendering, static…
The user experience is essential in modern software, and performance is vital to a good experience. Modern software is all…
Throughout this tutorial, we will be looking at practices that should be adopted, things that should be avoided, and have…
What are structs? Understanding object-oriented programming is a must for any developer. Object-oriented programming involves creating classes, which act as…
Authentication, or confirming the identity of a user in an application, is critical to implement in web applications. Authentication creates…
If you’ve ever worked with Jira, Trello, Confluence, or any other Atlassian product, you’ve likely encountered a drag-and-drop functionality that…
Next.js is a popular React framework that fills in the missing pieces of a typical React library to make it…
From social media services, to rideshare apps, to blogging platforms, images hold quite an important position for data representation. They…
Recently, Figma rolled out the beta for the newest interactive components feature that allows defining interactions and animations directly into…
Building a component UI library is a great way to enforce design standards across an organization or codebase. However, it…
When Swift was first introduced by Apple in 2014, it aimed to meet all of the demands that software engineers…
Introduction Pinia, a lightweight state management library for Vue.js, has gained recent popularity. It uses the new reactivity system in Vue…
When speaking about responsive images, we usually focus on CSS techniques that make an image adapt to different viewport sizes,…
Web pages, such as the one you’re reading now, have text, images, videos and other assets to bring information to…
Modern web applications accept various user inputs: mouse clicks, screen tap and keyboard events, gestures, audio, and files. Almost all…
React Native is an amazing library for developers looking to build mobile apps with ease. It provides an efficient way…
If you’ve ever used a site like Vercel or Medium you’ve likely experienced a passwordless login before. The flow typically…
In my experience working with React Native, one of the tasks I’ve found myself doing most often is building the…
From my experience, most of the colors I see people using in CSS are hex, and RGB. Recently, I started…
In this tutorial, we’ll compare Flutter, a cross-platform, open-source toolkit for building UIs, and Swift, the primary language for building…
Notion is a customizable project management software that makes it easy to collaborate on projects and pages, share your work…
Introduction Animations are important to make an app interactive. They make the user feel more connected with the app. With…
We spend a lot of time and effort crafting emails with a specific purpose: to make their recipients read them…
This article explains in detail what CSS animation is all about using the CSS clip-path() property. By the end of…
I have lately been writing a lot about transpiling PHP code (here, here, and here), describing how we can use…
Introduction To build any application in Flutter, we must create a widget class, which is the building block of a…
Internationalization, or i18n, is the process of building applications that can adapt to different cultures, regions, and languages. Localization, or…
As I was rewatching a movie I loved as a child, one quote in particular stood out. It’s from the…
URL shorteners like bit.ly and cutt.ly are incredibly popular. In this article, we are going to create a similar tool…
Building an application that meets the needs of a local market is paramount for developers who want to improve user…
Introduction Supabase is an open source Firebase alternative. This is a bold title, because Firebase is intended as a complete…
I’m weary of always comparing the web to so-called “native” platforms like Android and iOS. The web is streaming, meaning…
GraphQL is a query language and runtime for APIs. It enables clients to specify queries and allows servers to validate…
One of the most common errors in iOS app development is a thread error that occurs when developers try to…
Firebase helps you develop, measure, improve, and grow your mobile app. It’s backed by Google and covers a wide range…
A crucial part of application development is gracefully handling network requests. Responses returned by a network may consist of unexpected…
Forms remain an integral part of how users interact with the web. When dealing with forms, we have to handle…
One of the biggest pains of working with statically generated websites is the incrementally slower builds as your app grows….
In this episode, we’re talking about Chakra UI. What is it and how can it help with your React projects?…
At the 2021 Next.js Conf on June 15, developers from around the world joined to witness the launch of Next.js…
The Visual Studio Code editor has all the tools to debug Node.js applications effectively. Its built-in debugger can debug any…
We live in a world where we interact with a lot of online services and make payments to these services…
Earlier this year, I shared the HTML boilerplate I like to use when starting new web projects with line-by-line explanations…
Released by Apple in 2009, Grand Central Dispatch was built to manage tasks that run concurrently, queue them for execution,…
Developers can make desktop applications using several approaches: platform-specific APIs, native widget toolkits, hybrid desktop app development frameworks. If we…
Build tools are valuable assets for any web developer. Currently, many great build tools are available for all of the…
Expo is an open-source platform that makes developing cross-platform iOS and Android mobile apps much easier than before. The Expo…
In this article, we are going to build a blog with Next.js that supports two or more authors. We will…
The business world today is obsessed with user experience (UX) design. And for good reason: Every dollar invested in UX…
There are many cases where we need to build a widget asynchronously to reflect the correct state of the app…
Vue Native is a JavaScript framework designed to build cross-platform mobile applications that can run on both Android and iOS…
Having spent the last 20 years in the world of educational technology working on products for educators and students, I…
The JavaScript memory stores every piece of data and instruction used during program development and runtime in binary form. JavaScript,…
Introduction In development environments, especially those that involve lots of iterations, we do not want to restart our server or…
A frontend developer (let’s say his name is Eric) walks into a Vue bar. Eric orders his favorite cocktail: the…
Builds can be made faster using tools like esbuild. However, if you’re invested in webpack but would still like to…
How do we build and establish a successful design system? What about modern CSS and JavaScript? What’s the state of…
It’s been well-documented that the human brain is hardwired for motion. Humans are more likely to pay attention to how…
Hooks burst onto the scene with the release of React 16.8 with the lofty goal of changing the way we…
If you’re an accessibility nerd like me, or just curious about assistive technology, you’ll dig Auto-VO. Auto-VO is a node…
Swift, a programming language released by Apple in 2014, has quickly become one of the fastest growing languages in history….
In this article, we will be working through how to use Font Awesome in an Angular app and how we…
As frontend design becomes increasingly important for the success of an application, the need to work with the best frontend…
Lambdas are everywhere in Kotlin. We see them in code. They’re mentioned in the documentation and in blog posts. It’s…
Introduction Working with the camera, QR scanning, and text recognition is a complex issue for React Native apps. It’s a…
Friction in cooperation between designers and developers is fueling an ever-evolving discussion as old as the industry itself. We came…
Modals are a great tool for improving user interfaces. Essentially, a modal is a screen that appears above another screen,…
With the introduction of React Hooks, the amount of shareable code within React codebases has exploded. Because Hooks are thin…
Data is the backbone of every software application because the main purpose of an application is to solve human problems….
In this article, we’ll build a fitness tracker web application using React and Firebase, which are two technologies that enable…
Introduction Although Stripe is only the second most popular payment gateway (PayPal remains the first), it is enjoying steadily increasing…
Rust isn’t here to replace C++, even though they are syntactically similar. Rust provides memory safety as its core feature,…
Introduction An awesome thing about working with animations in Svelte is that you don’t need to download extra packages. Animations…
For most people, the first thing that comes to mind when thinking of voice user interfaces are voice assistants, such…
Introduction The Angular framework makes it straightforward to determine the direction dependency flows through an application, thereby making debugging seamlessly…
Hyperlinks have been one of the jewels of the Web since its inception . According to MDN, hyperlinks are what…
Many sellers rely on marketplace and payment processing platforms like Stripe in order to sell their goods. If you are…
In this tutorial, we’ll cover the basics of gRPC, a performant, open-source, universal RPC framework, review a little about the…
Introduction In the past few years, the web development coding technique has changed, and developers have started adopting various JavaScript…
JavaScript is an extremely flexible programming language used to build pretty much anything you can think of, from websites, web…
As globalization increases, writing React applications for a wide-ranging audience in different regions and locales means making it accessible across…
The img element’s alt attribute can be “nulled,” which is the act of setting it to an empty string instead…
In this tutorial, we’ll take you through a basic overview of extensions in Swift. We’ll demonstrate how Swift extensions work…
Are you interested in creating your own themeable React component library? Maybe you’d like full control over your project’s color…
It’s very common for developers to use SQLite, a C-language library, as the datastore in mobile applications. SQLite is especially…
Introduction One of the many selling points of React is that users can build components and reuse them repeatedly within…
Learning to build accessible websites can be a daunting task for those who are just starting to implement accessible practices….
In February 2021, Figma CEO Dylan Fields sold a piece of NFT art for $7.5 million. Similarly, Twitter co-founder Jack…
Currently, if we want to use HTTP caching in GraphQL, we must use a GraphQL server that supports persisted queries….
I am happy to see you here! In this tutorial, we will explore two very important functionalities in Xamarin: how…
You can see dialog on nearly every mobile application out there. Most applications use dialog to give an alert or…
Many web developers search for a repository on GitHub to contribute to. When they find an exciting project and start…
In this guide, we’ll compare one of the most commonly used frameworks for building web applications with Node.js, Express.js, with…
Created by Apple in 2014, Swift is a popular open-source language for building iOS applications that has garnered a strong…
Introduction In this article, you will learn all about widgets and the card class in Flutter, while bringing both together…
When developing apps in Flutter, you may encounter the need to display a list of items as a grid. You…
While Rust is known for its backend web development capabilities, the advent of WebAssembly (Wasm) has made it possible to…
Pinpoint accuracy and modularity are among the perks that make geocodes the perfect means of finding a particular location. In…
Images have been a key part of the web for decades. We interpret images much faster than text, which is…
Parent selector has been on developers’ wishlist for more than 10 years and it has become one of the most…
Is every resource properly minified and compressed? Are all the caching headers set correctly? Does the site load all the…
Today, we’re shining the spotlight on boilerplates and starter kits for all kinds of projects, from static site templates and…
It’s easy to get hyper-focused on how things look on the web. There’s a lot to look at. You’re looking…
As the author of ModernCSS.dev, I’m a big proponent of CSS solutions. And, I love seeing the clever ways people…
In today’s episode of the Smashing Podcast, we’re talking about image optimization. What steps should we follow for performant images…
When building themes and plugins for WordPress, we need to make sure they work well in all the different environments…
As technology increases its pace, so does the demand for new software to meet those needs increase. UI Design tools…
