• Building A Component Library With React And Emotion

    According to Clearleft, a component library is: “A collection of components, organised in a meaningful manner, and often (but not necessarily) providing some way to browse and preview those components and their associated assets.”— “On Building Component Libraries,” Clearleft We’ll learn how to build a component library by making one that comprises four components: ButtonA […]

    READ MORE
  • How To Automate API Testing With Postman

    One of my favorite features in Postman is the ability to write automated tests for my APIs. So if you are like me and you use Postman and you are tired of manually testing your APIs, this article will show how to harness the test automation feature provided by Postman. In case you don’t know […]

    READ MORE
  • Smart Interface Design Patterns In Your Pocket: Checklist Cards PDF

    Last month we released Smart Interface Design Checklists PDF, a deck of 100 cards with questions to ask when designing and building pretty much any interface component. Each checklist — from intricate data tables and web forms to troublesome hamburgers and carousels — has been curated and refined for years. All checklists are based upon […]

    READ MORE
  • Smashing Podcast Episode 24 With Cassie Evans: What Is SVG Animation?

    Today we’re talking about SVG Animation. How can vector images, JavaScript and CSS all work together to provide engaging motion graphics? I spoke to SVG expert Cassie Evans to find out. Show Notes The SVG Animation Masterclass with Smashing Conference Cassie on Twitter Cassie’s personal website Weekly Update “How To Do More With Vue Router”by […]

    READ MORE
  • Designing With Reduced Motion For Motion Sensitivities

    CSS has recently added features that allow us to recognize certain user preferences and qualities of the user’s current environment. One of those new features, specifically the prefers-reduced-motion media feature, can be especially useful for designing more inclusive motion on the web. A few years back, I wrote an article about designing safer web animation […]

    READ MORE
  • September In All Its Facets (2020 Wallpapers Edition)

    September is just around the corner and, well, that means it’s time for some new wallpapers! Since more than nine years already, our monthly wallpapers series is the perfect opportunity for artists and designers from all across the globe to challenge their creative skills and dive into a little project just for fun. What tools […]

    READ MORE
  • How To Do More With Vue Router

    Vue Router is the official router for Vue. It deeply integrates with Vue core to make building Single Page Applications with Vue a breeze. Some of its popular features include: Dynamic Route matching. Named Routes. Named views. Programmatic navigation. These features are heavily used when developing with Vue and this is because they are part […]

    READ MORE
  • Building React Apps With Storybook

    Storybook is a UI explorer that eases the task of testing components during development. In this article, you will learn what storybook is about and how to use it to build and test React components by building a simple application. We’ll start with a basic example that shows how to work with storybook, then we’ll […]

    READ MORE
  • Everything Developers Need To Know About Figma

    If you aren’t using it yet the name Figma is surely a name that you’ve heard more and more over the last few years. Figma is a relatively new design tool that is browser-based. This means you don’t need to install it locally or buy expensive licenses to give team members access to design files. […]

    READ MORE
  • 4 Ways To Creatively Use Icons In Your Mobile Apps

    There’s nothing novel about using icons within mobile apps. From the home screen icon to the navigation menu, they’re pretty much a standard part of the apps that designers build. They come with big benefits too: Minimized distractions, More attractive UIs, Empowerment of users to easily engage with the app, Elimination of language barriers, Improvement […]

    READ MORE
  • Inspired Design Decisions With Bradbury Thompson: The Art Of Graphic Design

    The idea for this series — and the book which will follow it — was sparked by a casual conversation, but writing it has had a profound impact on me and the work I make for the web. I’m more thoughtful in my approach to page layout and to the ways a page and its […]

    READ MORE
  • Setting Up An API Using Flask, Google’s Cloud SQL And App Engine

    A few Python frameworks can be used to create APIs, two of which are Flask and Django. Frameworks comes with functionality that makes it easy for developers to implement the features that users need to interact with their applications. The complexity of a web application could be a deciding factor when you’re choosing which framework […]

    READ MORE
  • Forms And Validation In Ionic React

    Ionic Framework is a UI Toolkit for building cross-platform mobile applications using HTML, CSS, and JavaScript. The release of Ionic 5 in early 2020 came with official support for React, enabling React developers to easily build mobile applications using their favorite tools. There isn’t much support for working with forms, however, and many of the […]

    READ MORE
  • How To Help Your Clients Get More Backlinks Through Design

    There are certain truths when it comes to what helps a website rank in search. Google wants to see: Mobile-first design Fast page speeds Top-notch security User-friendly navigation Trustworthiness and expertise … among other things. It also wants to see high-authority websites link back to your website. And if your clients aren’t obsessed with getting […]

    READ MORE
  • How To Build Your Own Comment System Using Firebase

    A comments section is a great way to build a community for your blog. Recently when I started blogging, I thought of adding a comments section. However, it wasn’t easy. Hosted comments systems, such as Disqus and Commento, come with their own set of problems: They own your data. They are not free. You cannot […]

    READ MORE