1,379 articles from Smashing Magazine.
When tackling a big refactor, what are the things you should focus on and what performance improvements can you expect? Dealing with themes for large platforms and CMS, legacy issues often become a bottleneck. In this article, Carson Shold discusses how his team improved the performance and organization of their Shopify themes, and improved maintainability along the way.
This article showcases a case study of Bookaway’s landing page performance. It’s about a couple of things that Bookaway faced and Liran Cohen (as part of a company in the traveling industry) managed to optimize the pages, so that the HTML they send is smaller. Smaller HTML means less time for Google to download and process those long strings of text. Today you’ll see how taking care of the props y
No matter how experienced you are, mistakes are an inevitable part of software development. But we can learn to repair them! During the course of this article, you’ll witness many disasters — but you’ll see that virtually nothing is beyond repair in Git! Once you know the right commands, you can always find a way to save your neck. And this is what Tobias will be looking at in this two-part series
In this episode, we’re starting our new season of the Smashing Podcast with a look at the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to expert Miriam Suzanne to find out.
Web-oriented databases, frameworks like Nuxt and Next.js, and even frameworkless approaches are evolving the Jamstack, but the core principles are more powerful than ever. As the developer community has grown, there’s also been more noise, and we’re even starting to test the boundaries of Jamstack’s best practices. It feels like the right time to both revisit the original vision some of us had fiv
Do you need a little inspiration boost? Well, then our new collection of wallpapers is for you. Designed with love by the community for the community, the wallpapers are available with and without a calendar for May 2021.
Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy Osmani
The cat is out! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our practical modern guide to delivering high-quality images on the web with the best performance. Image optimization, loading behavior and rendering in the browser require understanding of image formats and image compression tec
Easing functions can change the look and feel of an animation by affecting the rate, or speed, of an animation. As human beings, we are accustomed to a natural, non-linear motion. Using those custom-easing functions in the animations can lead to an improved impression on users and a more delightful user experience. In this article, we’re going to take a deep dive into easing functions and see how
Accessibility experts Kate Kalcevich and Mike Gifford introduce readers to "layered accessibility testing”, a practice of using a variety of tools and approaches at different stages in the digital product lifecycle to catch accessibility issues early — when it’s easier and cheaper to fix them. In this article, Kate Kalcevich & Mike Gifford will share how to “layer” accessibility testing by using a
The CSS Working Group Editor’s Draft for [Selectors Level 4](https://drafts.csswg.org/selectors-4/) includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today!
Sometimes it’s the little things in web life that make us look twice. From carousels to documentation to cookie disclaimers, here are some sites taking the mundane and sprinkling in a little magic. Great ideas in web design come so thick and fast that it can be easy to miss them if you’re not careful. In this article, Frederick O’Brien brings you a small antidote to that, piecing together splashes
Incremental Static Regeneration (ISR) is a new evolution of the Jamstack, allowing you to update static content instantly without needing a full rebuild of your site. The hybrid approach of Next.js allows you to use ISR for e-commerce, marketing pages, blog posts, ad-backed media, and more. In this article, Lee Robinson will explore a new evolution of the Jamstack: Incremental Static Regeneration
As designers, we are often burdened by the responsibility of producing and managing website content. It’s not our job to write it, but it’s not the client’s either. In many cases a vacuum emerges which ultimately gets filled with poor content. In this article, Matt Saunders will show you that you can avert disaster by including content production in the design process.
Let’s explore the plugins providing GraphQL servers to WordPress. When should we use WPGraphQL, and when the GraphQL API for WordPress? Is there some advantage of one over the other, or some particular task that is easier to accomplish with one of them? In this article, Leonardo Losoviz will describe, from his own point of view but as objectively as possible, when WPGraphQL is the way to go and wh
How are Core Web Vitals measured? How do you know your fixes have had the desired effect and when will you see the results in Google Search Console? Let’s figure it out! In this post, Barry Pollard is going to attempt to explain a bit more about what’s going on here and explain some of the nuances and misunderstandings of these tools.
It’s no secret that the technical interview process leaves something to be desired; it’s often riddled with anxiety and stress. From the recruiter’s phone call to the systems design interview to negotiating a job offer, there is no all-encompassing technical interview resource, so Emma Bostian decided to create one. In this article, Emma Bostian is going to take a look at seven of the most common
If you’re an agency owner, you know that you need customers to grow. No matter how big your dreams are, customers are the lifeblood of your business. But you’re probably wondering — how do you attract quality, high-paying clients?Selling is key to growing your web design business, but it doesn’t have to be complicated! With clear goals, customer research, and proven closing techniques, anyone can
At Smashing, we’ve been busy over the last few months. We’ve set up new workshops, redesigned our navigation, refined performance and improved accessibility. There are subtle UX changes coming in, and we’d love to share what we’ve been cooking. A sincere thank you for your kind, ongoing support and generosity — thank you for being smashing, now and ever!
You may have come across horizontal scrollbar issues, especially on mobile, if you’re a front-end developer. Because there are many causes of scrollbar problems, there is no straightforward solution. Some issues can be fixed quickly, and some need a little debugging skill. In this article, Ahmad Shadeed will explore the causes of overflow issues and how to solve them. We will also explore how mode
Instead of sending the entire video at once, a video is sent as a set of smaller chunks that make up the full video. This explains why videos buffer when watching a video on slow broadband because it only plays the chunks it has received and tries to load more. In this article, Deven Rathore will build a video streaming app using Nuxt.js and Node.js. Specifically, you’ll build a server-side Node.j
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS generators, SVG generators and accessible front-end components. This time we look into templates and tools for building and designing HTML emails. Don
UX practitioners can play an important role in growing the UX maturity of the organizations and product teams they work with. This final article in a three-part series presents two additional tactics that are critical for achieving and maintaining higher levels of UX maturity: education of UX staff and education of non-UX staff on UX principles and processes.
Have you ever struggled to get the green light on your design proposals? Do you feel like your design process needs to be formalized? Is the COVID19 era becoming a challenge for you when working remotely as a designer? In this article, Ismael González will show you how to get to know a methodology to document your design process, so keep reading!
Unreliable tests are a living nightmare for anyone who writes automated tests or pays attention to the results. Flaky tests have even given folks nightmares and sleepless nights. In this article, Ramona Schwering shares her experiences to help you get out of this hell or avoid getting into it. It’s important to continually hunt for flaky tests, whether by preventing them in the first place or by d
With the explosion in popularity of the Jamstack has come the proliferation of new options for managing your content. Headless has become quite the hot topic in development circles of late, but where do you start if you are embarking on a new project and haven’t yet decided where to store and organize your content? In this article, David Eglin will give you a little bit of a primer on the CMS land
In a new series of posts, we highlight some of the useful tools and techniques for developers and designers. This time around, let’s look at vanilla JavaScript code snippets — resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.
Quick, constant change is a given on the web. It is often one of its greatest strengths. As ever, though, there is a balance to find. Although longevity takes a different form online, its value is immeasurable.
By systemizing the fundamentals of typography and space, and leaning into the inherent fluidity of the web, a free new **CSS tool** called [Utopia](https://utopia.fyi/) offers an alternative to breakpoint-driven design. This shared language between design and development streamlines communication and encourages the creation of bespoke constraints for your projects to ensure consistent and harmonio
Let’s welcome the new month with some fresh wallpapers. Designed with love by artists and designers from across the globe, they are available with and without a calendar for April 2021.
Choosing to use a new technology can often bring much desired productivity, security, and efficiency to a project. It is also fraught with risk and uncertainty. How and when to adopt a new technology for client projects is at the heart of leading a great agency. In this article, Michael Rispoli explains how he evaluated the decision of whether or not to adopt a serverless database for client proje
In a new series of posts, we highlight some of the useful tools and techniques for developers and designers. Last weeks, we’ve covered CSS auditing tools, CSS generators and accessible front-end components. This time around, Iris Lješnjanin will take a look at SVG generators — for everything from shapes and backgrounds to SVG path visualizers and SVG → JSX generators.
UX practitioners can play an important role in growing the UX maturity of the organizations and products they work with. This article, the second in a three-part series, presents two additional tactics that can be helpful for those working in organizations that have started engaging in UX, but are still at the lower to middle stages of maturity: knowledge sharing and mentorship. You can use these
How do we get media performance right while staying within performance budgets? In this article, Akshay Ranganath will take a look at the recent stats and data around performance budgets, video playback performance issues and some techniques and tools to address these issues. Having a performance budget as a standalone metric might not be of much help. That’s why we must correlate performance to o
Reactivity is the ability for a variable (array, string, number, object, etc) to update when its value or any other variable that it makes reference to is changed after declaration. In this article, Timi Omoyeni is going to look at reactivity in Vue, how it works, and how you can create reactive variables using newly created methods and functions.
Eleventy (aka 11ty) is rising in the ranks among static site generators. This Node-based builder is attractive due to its zero-config starting point, purely static output, and ease of achieving the coveted top Lighthouse performance score of four perfect 100s. Let’s dive into what else makes it unique, and learn about some essential concepts to help you successfully get started.
One of the drivers of the popularity of headless options is that expectations for the quality of user experience are constantly going up. We have a wealth of tools to help developers build things fast so results are expected quickly. Going headless lets your team take full control of the user experience instead of wrestling with a large tool that doesn’t do quite what you wanted. In this article,
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. We sincerely hope that these tools and techniques will prove to be useful in your day-to-day work — and most important
Wondering what’s happenin’ at Smashing? Well, we’ve been busy. Here’s a little story of how we removed floating labels, improved performance on mobile, and launched a new series of articles. Oh, and how you can contribute to Smashing, too.
The secret to growing a successful web design business is thinking of design as a service, not a product. When you focus on recurring revenue and sell to one targeted niche, you can grow a business faster than ever. In this two-part series, Stephen Roe shares the agency growth lessons we’ve learned. In this first part, we break down the pricing model that’s worked best for us and explain how to le
As Flutter keeps evolving, there are more and more things we can do with it, but it’s still not reasonable to say that Flutter can be used for any app development project of any kind. Flutter has been transitioning from a cross-platform mobile development SDK for Android/iOS into a tool that allows you to run the same code natively in a browser on Windows, Linux and macOS. With Flutter 2, non-mobi
How do we know which patterns are good, better, best when it comes to accessibility? Is it better to use an established pattern/library or create new ones? With the myriad of choices available, we can quickly become caught up in a web of confusion on this topic. In this article, Carie Fisher will attempt to untangle the complex world of accessible patterns — one step at a time. She will kick thing
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. This time Iris Lješnjanin brings you CSS Generators: from CSS shadows to easing gradients to CSS overlays to CSS doodles.
We all benefit when we work to increase the overall UX maturity of our organizations. If we wish to meaningfully improve our UX practice, it is critical we look for opportunities to help grow the maturity of UX across our organization. We face a larger challenge when it comes to growing UX in a way that has impact across an organization than we do with growing our own UX skills. In this article, V
Ideally, a CSS auditing tool would provide some insights about how heavily CSS implact rendering performance, and which operations lead to expensive layout recalculations. It could also highlight what properties don’t affect the rendering at all (like Firefox DevTools does it), and perhaps even suggest how to write slightly more efficient CSS selectors. In a new short series of posts, we highlight
All of us use web scraping in our everyday lives. It merely describes the process of extracting information from a website. For a lot of web scraping tasks, an HTTP client is enough to extract a page’s data. However, when it comes to dynamic websites, a headless browser sometimes becomes indispensable. In this tutorial, Andreas Altheimer will build a web scraper that can scrape dynamic websites ba
Meet our new workshops on front-end and UX — on web performance, interface design, psychology and modern CSS. With Lea Verou, Harry Roberts, Stephanie Eckles, Dan Mall and so many others. [Jump to all online workshops ↬](https://smashingconf.com/online-workshops/)
If this is your first time hearing of Webiny, it’s an open-source framework for building serverless applications which provide users with tools and ready-made applications. In the world of serverless applications, Webiny is becoming a popular way to adopt the serverless approach of building applications by providing handy tools that developers can build their apps upon. In this article, we will lo
To inspire mobile designers, let’s look at how some clever design solutions tackle mobile navigation, confirmation dialogs, animations, and gamifying the waiting experience. While these solutions are mostly unconventional, the point isn’t to highlight them for their own sake. Design solutions have to be built with the pillars of accessibility and usability, but they can be refined according to you
With so many great tools available, there really shouldn’t be any excuse for not testing with users these days. It is fast, easy and cheap. But we don’t even need to limit ourselves to testing. These tools also make user research and visualization easier than ever before, making them ideal all the way from discovery through prototype to post-launch optimization. Our lives as UI designers have neve
In this article, we’ll look at how to create an outside focus and click handler with React. You’ll learn how to recreate an open-source React component (react-foco) from scratch in doing so. To get the most out of this article, you’ll need a basic understanding of JavaScript classes, DOM event delegation and React. By the end of the article, you’ll know how you can use JavaScript class instance pr
With mobile traffic accounting for over 50% of web traffic these days, leaving your mobile performance unoptimized isn’t really an option. In this article, we’ll discuss the complexity and challenges of mobile, and how mobile testing tools can help us with just that.
As digital practitioners, GDPR has impacted every facet of our professional and personal lives. Whether you’re addicted to Instagram, message your family on WhatsApp, buy products from Etsy or Google information, no one has escaped the rules that were introduced in 2018. In this article, Danny Bluestone will take a look at two developments that have impacted cookies, plus a third on the horizon.
Our wallpapers post this month is a special one: There’s not only a new collection of wallpapers created by creative folks from across the globe waiting for you, but we’ll also award a smashing prize to the best design.
Trust is at the heart of a long-term strategy of any product. There are many ways to earn it, and even more ways to lose it. In this article, Adam Fard will go through how you, as a product designer, can make sure your product nurtures and retains trust throughout every touchpoint. To do that, we’ll be borrowing some of the tricks marketers and product people have up their sleeves.
An introduction to building a Discord bot using the Discord.js module. The bot will share random jokes, assign or revoke user roles, and post tweets of a specific account to a Discord channel. In this article, Subha Chanda will showu you how to build a bot from scratch using JavaScript and with help from Discord.js. He’ll cover the process from building the bot up to deploying it to the cloud.
Where to put the label in a web form? In the early days, we talked about left-aligned labels versus top-aligned labels. These days we talk about floating labels. Let’s explore why they aren’t a very good idea, and what to use instead. Some people assume float labels are best because Google’s Material Design uses them. But in this case, Adam Silver recommends using conventional text fields which ha
A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported `aspect-ratio` property in combination with `object-fit` provides a remedy to this headache of the past! In this article, Stephanie Eckles will show you how to use these properties, in addition to creating a responsive gradient image effect for extra flair.
As digital practitioners, GDPR has impacted every facet of our professional and personal lives. Whether you’re addicted to Instagram, message your family on WhatsApp, buy products from Etsy or Google information, no one has escaped the rules that were introduced in 2018.
As developers, we’re constantly learning new languages and frameworks. But how can you structure this learning to ensure maximum benefit while still progressing? Here’s how you can devise your own curriculum to keep moving in the right direction. The following are simply steps that worked for Kirsty Simmonds when she needed to learn over time, without burning out or placing undue pressure on mysel
