1,379 articles from Smashing Magazine.
HTML is getting better at providing nice APIs for implementing cool features. In this tutorial, Chidi Orji is going to show you how to use the `HTML` `Intersection Observer` API to implement infinite scrolling and image lazy loading in a React functional component. In the process, we’ll learn how to use some of React’s hooks and how to create Custom Hooks. Let’s get started!
It’s that time of the month! Join us as we share the latest news and highlight the things we’ve been working on and have also enjoyed reading over the past month. It’s nice to have an overview of the most important things in one place, but do feel free to follow us on Twitter, Facebook, LinkedIn and subscribe to our RSS feed as well as our bi-weekly newsletter. We like helping you stay on top of t
We are sad to have to reschedule SmashingConf SF, however we are working to find ways to be with our community virtually until we can all meet up again.
We are fortunate to have robust patterns to choose from when optimizing accessibility in SVGs — but most people stop there, focusing on code compliance and not actual users and their needs. If true inclusiveness lies beyond patterns — what other factors should we consider when designing and developing accessible SVGs?
Reset password functionality is table stakes for any user-friendly application. It can also be a security nightmare. Using NodeJS and MySQL. Today, Darshan Somashekar demonstrates how to successfully create a secure reset password flow so you can avoid these pitfalls. Darshan will be using NodeJS and MySQL as the base components. If you’re writing using a different language, framework, or database
It
The Laravel-powered October CMS enables to extend the functionality of the application through the use of plugins. In this article, Leonardo Losoviz will do a tour around October CMS: You will first see how to install it, then check some of its coding and usability features in a bit more detail, and finally get your hands dirty implementing an e-commerce website through one of its most popular plu
In this episode of the Smashing Podcast we’re talking about an interesting open-source tool called Sourcebit. How can it help our content workflow with JAMstack sites? Drew McLellan speaks to developer Eduardo Bouças to find out.
Thanks to some recent changes in browsers, it’s now well worth setting `width` and `height` attributes on your images to prevent layout shifts and improve the experience of your site visitors. Barry Polland loves improvements that just work without any effort required of website owners. That is not to ignore the hard work required by the browser developers and standardization teams, of course, but
Transliteration is a popular way to input non-English characters using an English keyboard. The typical method of implementing this is via keyboard event capturing but there’s no uniform support from mobile browsers. In this article, Sandamal Siripathi explains a new method to eliminate such browser-related problems when developing web apps that use transliteration.
Ever built a website and reached for jQuery, Bootstrap, Vue.js or React to acheive some basic user interaction? Alpine.js is a fraction of the size of these frameworks because it involves no build steps and provides all of the tools you need to build a basic user interface. Today, Phil Smith is going to take a closer look at Alpine.js and how it can replace JQuery or larger JavaScript libraries to
Around the web and within the CSS Working Group, there has been some discussion about whether we should specify a version of CSS — perhaps naming it CSS4. In this article, Rachel Andrew rounds up some of the pros and cons of doing so, and asks for your feedback on the suggestion.
Prototyping helps to formulate the main trajectory of the design by framing your mind around a continuous pursuit of better concepts. Any team that makes a prototyping integral part of their design is motivated to search for a better solution. Today, Tony Kim will introduce you to ProtoPie, a tool that will help you prototype in the best way possible to validate an idea and bring it to life.
In this sixth instalment of Inspired Design Decisions, Andy Clarke will explore how British art director Neville Brody and in particular his work on The Face Magazine inspires his designs for the web. How do we use blend modes to add depth to our designs? How do we use vertical text for impact? How can we use clipping paths to bring in character and energy to a design? In this article, Andrew Clar
Do you need a little inspiration boost? Well, then our new batch of wallpapers is for you. We embarked on this monthly wallpapers journey more than nine years ago and we’re very thankful for everyone who submits their artworks to it each month anew. Today, designed by artists and designers from across the globe, Cosima Mielke brings you versions with and without a calendar for March 2020.
The word “SEO” holds a lot of weight. We know how critical it is to the success of a website and, yet, it often becomes one of those things that’s left until the very end of a web design project to deal with. Or, worse, it’s pushed onto one person’s plate who likely isn’t capable of doing all that needs to be done. SEO should be a team sport — and that’s what today’s post is all about.
Conferences are about gathering information and knowledge but are also opportunities to meet and learn from other like-minded folks in the web design community. Plus, you’ll be exposed to a lot of new information, which will help you advance in your career. Let’s dive into our list for January to December. Jan Constantin will keep updating this list, so make sure to bookmark this page and check it
Whenever a web client uploads a file to a server, it is generally submitted through a form and encoded as multipart/form-data. Multer is a middleware for Express.js and Node.js that makes it easy to handle this so-called multipart/form-data whenever your users upload files. In this article, Deve Rathore introduces how Multer streamlines the process of handling file uploads. It also introduces how
Foldable devices have brought with them talk of a ‘foldable web,’ and the idea that long-standing web conventions may be on the verge of a serious shakeup. Is it all hype, or is it time to get flexible? The ‘foldable web’ will bring with it new challenges, new opportunities, and, in all likelihood, new syntax. The web could be in for its biggest shakeup since the smartphone. Users and coders alike
In this episode of the Smashing Podcast, we’re talking about Ethical Design. What does it mean for a design to be ethical, and how do we make improvements in our own projects? Drew McLellan speaks to Trine Falbe and Martin Michael Frederiksen to find out.
In this article, Blessing Krofegha introduces Tailwind CSS, a CSS library that gives you all of the building blocks you need to build bespoke designs without opinionated styles. With Tailwind CSS, you get to create the components that suit what you want or what you are working on. These components can be created by harnessing the power of the utility-first prowess of Tailwind CSS. You’ll also lear
The blockchain technology is receiving a lot of attention because of its ability to enhance [security](https://www.smashingmagazine.com/category/security) in trustless environments, enforce decentralization, and make processes efficient. In this tutorial, Alfrick Opidi demonstrates how to create a simple cryptocurrency, called `smashingCoin`, using the concepts of JavaScript classes and Node.js. G
iPhone was built to be comfortably used for one-handed operation, allowing for a smoother thumb movement across the screen. 90% of the smartphones sold today have 5-inch displays. Bigger screen real estate presents newer challenges and opportunities for app makers and designers. In this article, Maitrik Kataria will show you how designing apps for one-handed usage can solve those challenges.
In this tutorial, Chidi Orji will show you how to build a React drag-and-drop component for file and image uploads. In the process, we’ll learn about the HTML drag-and-drop API. We will also learn how to use the useReducer hook for managing state in a React functional component.
Whether you’re building a new site or you’re managing a live one, you can’t afford to make any changes without a process for cross-browser testing and a tool to do the heavy lifting for you. LambdaTest’s wide array of tests are the answer. From fully automated cross-browser tests to semi-automated tasks, we’re going to explore a much more efficient way to review your websites and all their browser
Does your website have a mascot that the audience isn’t responding well to or that outright hates it? Or maybe your new client has brought along a mascot that you’re unsure about? If a mascot’s design or messaging isn’t on point with an audience, there’s no sense in keeping it as is and losing business over it. Today, Suzanne Scacca is going to give you four options for turning your hated brand ma
It’s nice to have an overview of the most important things in one place, but do feel free to follow us on Twitter, Facebook, LinkedIn and subscribe to our RSS feed. We like helping you stay on top of things and making life just a little bit easier! Fear not, we’ve got your backs! Our bi-weekly [Smashing Podcast](https://www.smashingmagazine.com/category/smashing-podcast) has you covered with a var
Almost all JavaScript projects that can be found out in the wild interact with a web service or API and either use it for authentications or getting user-related data. In this article, Kelvin Omereshone introduces Mirage JS, an API mocking library that lets you build, test and share a complete working JavaScript application without having to rely on any backend API or services. You’ll also learn h
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, Rachel Andrew will learn how to use the grid-template-areas property to define placement on the grid and find out how the property really works. If you haven’t used this layout method before, give it a try. We find that it is a lovely way to experiment with layouts and often use it when prototyping a layout —
Appointment and event booking can be a time-consuming and tedious task. Business owners don’t want to deal with it and their assistants aren’t always the most effective way to capture or handle this information. Web designers, on the other hand, can help. By using the Amelia booking plugin for WordPress, you can create booking widgets that collect more appointments (and revenue) for your clients.
In this episode of the Smashing Podcast, we’re taking a look at UI Frameworks. How can the custom needs of a highly usable application be met with a set of off-the-shelf tools? Drew McLellan speaks to UX Designer Stéphanie Walter to find out what we should be considering when building on a UI framework.
SmashingConf is coming to Austin, and in this post, Rachel Andrew brings you an interview with one of our speakers, Rémi Parmentier, who will be presenting on HTML email and aiming to solve all of your email creation woes. You can find all of that content, including a full transcript of the webinar in the post “Become An HTML Email Geek With These Videos From Rémi Parmentier.
Leaflet is a very powerful tool, and we can create a lot of different kinds of maps. This tutorial will help you understand how to create an advanced map along with the help of React and Vanilla JS. In this article, Shajia Abidi is going to represent the locations of the non-medical fire incidents to which the SF Fire Department responded on a map.
Django is a framework for developing dynamic websites. While a static website is one that solely presents information, there is no interaction that gets registered to a server. In a static website, the server sends HTML, CSS, and JavaScript to a client and that’s it. More capabilities require a dynamic website, where the server stores information and responds to user interaction beyond just servin
In this article, Dan Halliday reviews the standard approach to creating animated flip cards, and introduces an improved method which solves its sizing problem. You’re going to build a flip card grid with some CSS basics — transforms, flex, and grid. Dan will cover: how flip cards are usually implemented using absolute positioning, the sizing problem that absolute positioning introduces, and a gene
We need to craft better digital products that respect customer’s choices without hurting business KPIs. And we need to do so by taming data collection and abandoning dark patterns, from hidden checkboxes to ambiguous copywriting. Today, Vitaly Friedman brings you our new practical guide on how to influence a positive change in your company and help your business grow sustainably. Without dark patt
In this post, we’ll set up a demo site and tutorial for headless WordPress, including a starter template! We’ll use the WordPress dashboard for rich content editing, while migrating the front-end architecture to the JAMstack to benefit from better security, performance, and reliability. We’ll do this by setting up a Vue application with Nuxt, pulling in the posts from our application via the WordP
SmashingConf is coming to Austin, and in this post, Rachel Andrew brings you an interview with one of our speakers, Zach Leatherman, who will be talking about type and font performance. Zach is no stranger to the Smashing stage, and if you want to find out more about web fonts and loading strategies, you can watch his talk from SmashingConf London 2018.
Artists and designers from across the globe once again got out their favorite tools and created unique and inspiring wallpapers to welcome the new month. The wallpapers are available with and without a calendar for February 2020 and can be downloaded for free.
Today, Anna Prenzel would like to focus on data streams resulting from click events on the user interface. The processing of such clickstreams is particularly useful for applications with an intensive user interaction where many events have to be processed. This article is dedicated to Angular developers who want to harness the concept of reactive programming. This is a programming style that — si
As opposed to JavaScript and Python, variables and functions in CSCS are case-insensitive. The primary goal of CSCS is to let the developer write as little code as possible. In this article, Vassili Kaplan explains how you can use a scripting language to develop cross-platform mobile applications. You’ll find examples in both iOS and Android that include placing widgets on the screen, SQLite, Web
WordPress adoption is massive. So why would a WordPress site consider moving to JAMstack? In this technical case study, Sarah Drasner will cover what an actual WordPress migration looks like, using Smashing Magazine itself! She’ll talk through the gains and losses, the things she wishes she knew earlier, and what she was surprised by. Let’s dig in!
We’re taking a look at the brand new version of Microsoft Edge and its Chromium-based rendering engine. What does that change mean for web developers, and how does the death of Microsoft’s own rendering engine impact the web? Today, Drew McLellan talks to Microsoft’s Aaron Gustafson and Stephanie Stimac to find out.
Want to build a website or PWA that attracts a large audience and then converts as much of that audience into paying customers as possible? If that’s the case, what you need to do is use storytelling in your design — and there are a bunch of ways to do this. The key is to pair your client’s story, brand image, and goals with the style of story you decide to tell. There’s a ton of variation in how
How do we know if we are truly impactful as a design team? Are we seen as a vehicle to deliver a solution that moves a needle? The business value of design has been proven at scale by the McKinsey Design Index. and the study shows the best design performers increased their revenues and shareholder returns at nearly twice the rate of their industry counterparts. It’s time to empower our design team
WordPress Multisite allows you to run multiple websites on your server using the same WordPress installation. From setting up Wordpress Multisite to optimizing its various features, with this article, Manish Dudharejia will help you understand every facet of this unique WordPress tool. Read on to find out more.
Unless you’re creating your entire Vue app in one component (which wouldn’t make any sense), you’re going to encounter situations where you need to share data between components. With so many different ways to share data across components, you should know which technique is best for your situation. In this article, Matt Maribojoc will analyze three of the most common ways to pass data in VueJS.
SmashingConf is coming to Austin! In this post, Rachel Andrew gives you a rundown of what you can expect and shares a video interview with Miriam Suzanne who will be sharing the stage with the rest of the brilliant SmashingConf Austin speakers!
HTML comes with a bunch of input controls, and there are tons of component libraries that include many standard controls such as checkboxes, and radio buttons. But what happens when you need something unusual? In this article, Uri Shaked will show you how to build custom HTML components that mimic physical objects, such as the Arduino Pushbutton. We’ll draw the component in Inkscape from scratch,
With so much going on, we’ve made it our mission to help you stay on top of things. Of course, you can follow us on Twitter, Facebook, LinkedIn and subscribe to our RSS feed, but it’s nice to have an overview of the most important things in one place. With this guide, Iris Lješnjanin covers pretty much everything from performance budgets to single-page apps to networking optimizations.
How do you move faster when adding folks to a project supposedly slows it down? Mailchimp’s CPO takes the reader through some considerations for preserving momentum while scaling up. Software is difficult to build with lots of complex interdependencies. And everyone needs to work together to get it done. As you work to manage dependencies and introduce tools to help scale, make sure you clearly co
In this episode of the Smashing Podcast, we’re taking a look at the UK Government’s design system. How are design systems used within government? Is it any different to how we might work in the commercial sector? Drew McLellan talks to design systems advocate Amy Hupe.
In this article, Yusuff Faruq will show you how to use React’s Context API which allows you to manage global application states in your React apps without resorting to props drilling. In the process you will learn what the Context API is and the problem it solves, how to create Context and consuming it in both functional and class-based components, and when to use the Context API. Let’s start!
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use the grid lines to place items. The other methods Rachel will show you in future articles are alternate ways to specify your layout, but are based on the grid created by numbered lines. But for today, here you will find pretty much all you need to know about grid lines!
A walkthrough of creating an Angular 8 web application and a QR Code generator app completely based on Angular while hosted on Netlify. In this article, Shubham will take you into a walkthrough of creating an Angular 8 web application using the official Angular Material Design library. We will be creating a QR Code generator web application completely based on Angular while hosted on Netlify.
No frills, or flashing neon frills with sprinklers attached? ‘Brutalist’ websites have flourished in recent years, but their guiding philosophy remains unclear. Brutalist web design has grown so quickly that there does not seem to be a clear consensus on what the style actually is. To some it means practicality, to others audacity. Love it or hate it, brutalist architecture celebrates rawness.
Browsers’ visual display of headings nested inside `` elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies. In this article, Bruce Lawson explains what use we have of `` and how authors should mark up headings that are hugely important to AT users.
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid.
Are you using sticky elements on your mobile website or PWA? If so, take a moment and ask yourself this question: Do you have anything in them besides your logo, hamburger menu or search bar? If that’s not the case, then it’s time to shake things up. Your mobile visitors are primed to take action. You just need to make it easy for them to do so — and sticky bars and elements are the perfect opport
