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, optimize the generated SVG code for the Web, and wrap it as a standalone web component using the lightweight lit-element library, paying extra attention to accessibility and mobile usability considerations.
Read more…
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.
Read more…
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 communicate the why behind the practices.
Read more…
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.
Read more…
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!
Read more…
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!
Read more…
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.
Read more…
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.
Read more…
Browsers’ visual display of headings nested inside <section> 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 <section> and how authors should mark up headings that are hugely important to AT users.
Read more…
Let’s make 2020… fast! An annual front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences on the web today. Updated since 2016. Kindly supported by our dear friends at LogRocket, a frontend performance monitoring solution that helps reproduce bugs and fix issues faster.
Read more…
