With so many people — including our workshop leaders — working from home, we thought we would bring our Smashing workshops from our home offices to yours. We hope we can help you continue to learn and interact with the speakers and each other, and also help out our workshop leaders who are losing income by being unable to run their workshops in person right now.
Read more…
In this seventh instalment of Inspired Design Decisions, Andy Clarke will explore how American art director and graphic designer Otto Storch inspires his designs for the web. How do we use CSS Shapes to go beyond basic shapes to add energy to our designs? How do we use rotations on text for extra impact? How can we use mirroring and reflections to add interest to a design? In this article, we’ll explore just that.
Read more…
Making your tables sortable in React might sound like a daunting task, but it doesn’t have to be too difficult. In this article, Kristofer Giltvedt Selbbekk is going to show you how to implement all you need to sort out all of your table sorting needs. By the end of this tutorial, you will have found a way to model your state, wrote a generic sorting function, and wrote a way to update what our sorting preferences are. After making sure everything is performant and refactored you will provide a way to indicate the sort order to the user.
Read more…
Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell the browser how to apply CSS during a render process. Houdini’s browser support is improving and some APIs are available for use today, so it’s a good time to become familiar with them and experiment. We are going to take a look at each part of Houdini, its current browser support and see how they can be used today using progressive enhancement.
Read more…
For the purpose of this two-part series of articles, we’re going to assume the answer for “Should designers code?” is “It depends.” If you’ve started and never finished courses in some online coding school — or if you’ve finished the courses but found it difficult to apply this style of learning in your day-to-day work, these two articles will provide a few different learning methods and will highlight different opportunities for their everyday application. In this first part of the series, we’ll take a look at getting comfortable with the command line and text editors.
Read more…
There isn’t a ton of mystery when it comes to what makes for an attractive and modern-looking design these days. What’s not always clear, however, is the usability aspect of it. In other words, have the pathways you’ve designed for users intuitive enough? The truth is, it’s all really just a guessing game unless you start getting user feedback early on. Thankfully, Indigo.Design has a usability testing solution to help us out.
Read more…
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 HTMLIntersection 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!
Read more…
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.
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.
Read more…
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?
Read more…
