Useful front-end & UX tips, delivered once a week.
With tools to help you get your work done better. Subscribe and get Vitaly’s Smart Interface Design Checklists PDF — in your inbox. 🎁
On front-end & UX. Trusted by 190.000 folks.
Latest Posts
Fresh Inspiration For March And A Smashing Winner (2021 Wallpapers Edition)
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.
Building User Trust In UX 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, we’ll 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.
Building A Discord Bot Using Discord.js
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.
Join 1,916 Smashing Members
A friendly community for people who design and build the web. With books, workshops, goodies and early-birds — for just 1 coffee a month. Take a look around.
Join the community ↬ Already have an account? Sign in!
Material Design Text Fields Are Badly Designed
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.
Create Responsive Image Effects With CSS Gradients And `aspect-ratio`
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! Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair.
State Of GDPR In 2021: Key Updates And What They Mean
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.
Building Your Own Personal Learning Curriculum
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.
Context And Variables In The Hugo Static Site Generator
In this article, we take a look at the topic of context and variables in Hugo, a popular static site generator. You’ll understand concepts such as the global context, flow control, and variables in Hugo templates, as well as data flow from content files through templates to partials and base templates.
Useful DevTools Tips And Shortcuts (Chrome, Firefox, Edge)
DevTools is very advanced and helpful, but can also be very intimidating and overwhelming. Let’s fix that. In this article, Vitaly reviews useful features and shortcuts for debugging in Chrome, Firefox, Edge and Safari.
Meet “Click!”: Encourage Clicks
Without Shady Tricks
Our new book on how to boost business KPIs, build trust and address doubts effectively — without alienating people along the way. By Paul Boag.
Jump to table of contents →Our Guides
A Smashing Guide to JavaScript & Frameworks
React, Vue, or perhaps the lightweight Alpine.js? Whether you are an experienced JavaScript developer working with one of these frameworks, or just starting to learn, our authors have created some tutorials for you.
Explore JavaScript & FrameworksA Smashing Guide to CSS Layout
CSS Layout has been transformed over the past years. We have you covered with all you need to master this new world. If you want to understand the technical details, or learn how to use new CSS creatively, these guides can help.
Explore CSS LayoutA Smashing Guide to Web Performance
Ensuring your site loads quickly is important. The subject touches almost every part of web design and development, from your choice of images to the performance of your web server. In this guide we bring together information that can help you build a fast site, and keep it fast.
Explore Performance
Email Newsletter
Every Tuesday, we send an email newsletter with useful techniques on front-end & UX. Subscribe and get a freebie: Smart Interface Design Checklists PDF — right in your inbox. 🔮
You can always unsubscribe with just 1 click.
Design Systems
Meet Design Systems, a recent Smashing book in which Alla Kholmatova explores how to set up an effective design system to create great digital products. With common traps, gotchas and lessons learned.
Community Links
Person Of The Week
Debbie O’Brien (@debs_obrien) has over 10 years experience in front-end development and has worked as a Tech Lead and consultant for many clients. She is a Google Developer Expert, Microsoft Most Valuable Professional, GitHub Star, Cloudinary Media Developer, and Auth0 Ambassador and loves to share her passion for JavaScript frameworks and performance with the community — contributing to Open Source, speaking at international events, or teaching at Vue School and Jamstack Explorers, for example. Thank you for sharing and caring, dear Debbie!