In this article, Abdulazeez Adeshina will show you what storybook is about and how to use it to build and test React components by building a simple application. He’ll start with a basic example that shows how to work with storybook, then will go ahead to create a storybook for a Table component which will hold students’ data. You should have basic knowledge of React and the use of NPM before proceeding with this article, as you’ll be building a handful of React components.
Read more…
In this article, Precious Ndubueze will be taking an in-depth look at what Django brings to the table by understanding what the generated files and folder do, this will give us a better understanding of the Django framework. It’s important to know that it will not be possible to take a look at everything happening inside of Django. For cases outside the scope of this tutorial, there will be links to point you to resources that will help with that. Today, Precious will guide you through understanding Django’s pre-built commands, files and basics.
Read more…
We’re talking about Next.js. What is it, and where might it fit into our web development workflow? Drew McLellan talks to co-creator Guillermo Rauch to find out.
Read more…
Ionic Framework provides first-class support for building fast and mobile-optimized applications for any platform using React. In this tutorial, Jerry Navi will show you how to build forms using Ionic React’s UI input components in this tutorial. You will also learn how to use a library to help with detecting form input changes and responding to validation rules. Finally, you will learn to make your forms accessible to screen readers by adding helpful text to your inputs’ ARIA attributes.
Read more…
Alongside our guides, printed books, eBooks and printed magazine, we’re thrilled to have yet another addition to our smashingly cherished gems: meet our brand new Interface Design Patterns Checklists. Co-founder of Smashing Magazine, Vitaly Friedman, has been collecting, curating and refining each checklist for years — we’re convinced that this deck of cards will prove to always be useful when designing and building any interface component. 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 social media and subscribe to our RSS feed, but it’s nice to have an overview of the most important things in one place.
Read more…
In this article, Umar Hansa will demonstrate some useful features in DevTools which can help you improve the accessibility of your website. For many websites, things like performance and accessibility are an afterthought. But as web developers, it’s best to strive to create the best possible experience we can for our users, regardless of their abilities. This article uses Google Chrome since it’s a browser I use and feel comfortable with. That being said, Firefox, Safari, and Edge have all made great strides in their developer tools, and they definitely have some great accessibility-related features of their own.
Read more…
Splitting colors into three levels (palette, functional, and component) can help you be more adaptive to changes and new requirements while working on a project. In this article, Artur Basak introduces a modern approach on how to set up CSS Custom Properties that respond to the application colors. The idea of dividing colors into three levels can be quite useful: a palette (or scheme), functional colors (or theme), and component colors (local scope).
Read more…
We’re talking about Serverless architectures. What does that mean, and how does it differ from how we might build sites currently? Drew McLellan talks to Chris Coyier to find out.
Read more…
This is the third and final part of the tutorial in which we’ll create the wheels (rims and tires), and add all the final touches (including the racing decals on the car’s body).
Read more…
You might be wondering, “Why should I use this instead of the alternatives?” Sapper is based on Svelte, which is known for its speed and relatively small bundle size. In a world where performance plays a huge role in determining an effective user experience, we want to optimize for that. In this article, Daniel Madalitso Phiri will take you through how to build a Svelte-powered static blog with Sapper and Strapi, as well as how to deploy the website to Netlify. You’ll understand how to build a static website, as well as use the power of a headless CMS, with a real-world example. So, let’s get started building our minimal blog, starting with our Sapper front end.
Read more…
