Over the past few months, many organizations have struggled in one way or another. Smashing, too, has had to get creative and we’ve had to rethink our conferences and workshops. In this post, I’ll share what we’ve learned about taking our workshops online.

When difficulties began back in March, it was essential that we reacted quickly. There was no huge deposit in the bank, no friendly investment to rely on — this small company has been fully independent since day one. So we got together and discussed what to do. Obviously, the situation wasn’t going to clear up in a week or two, and we had to figure out how to recalibrate not only our offering but also the way we ran things.

Rachel came up with the idea of putting our in-person front-end and UX workshops online. After all, all of us are mostly stuck at home, so let’s make the best of it. If we can’t travel to learn together, we’ll bring the workshops to everyone around the world.

Authentication is a very necessary feature for applications that store user data. It’s a process of verifying the identity of users, ensuring that unauthorized users cannot access private data — data belonging to other users. This leads to having restricted routes that can only be accessed by authenticated users. These authenticated users are verified by using their login details (i.e. username/email and password) and assigning them with a token to be used in order to access an application’s protected resources.

In this article, you’re going to be learning about:

1. Vuex Configuration with Axios
2. Defining Routes
3. Handling Users
4. Handling Expired Token

Dependencies

We will be working with the following dependencies that help in authentication:

• Axios
  For sending and retrieving data from our API
• Vuex
  For storing data gotten from our API
• Vue-Router
  For navigation and protection of Routes

In this article, we’ll take a closer look at how Framer Motion helps us in creating awesome animations. We’ll learn how motion components work and learn how to chain animations together. We’ll look into how to make gesture-triggered, timed, and scroll animations with Framer motion. Along the way, we’ll use the things we learn to build five demo applications I’ve set up to show us how we can integrate Framer Motion into real-world applications.

This tutorial will be beneficial to readers who are interested in integrating animations in their React application.

Note: This article requires a basic understanding of React and CSS.

What Is Framer Motion?

Framer Motion is an animation library that makes creating animations easy. Its simplified API helps us abstract the complexities behind animations and allows us to create animations with ease.

Companies willing to pay good money for a new piece of software are most likely not starting from scratch. They’re running an established business, with well-built and documented processes. So, they have tons of data to carry over.

As a result, the decision to bring a new app into the fold is not one they take lightly. Internal processes need to change. Getting the team to adopt the new solution can take time. Integrating it with existing systems and external tools can be a problem. Oh yeah, and there’s the matter of compliance to worry about, too.

This means there’s a lot of pressure on new software to provide a top-notch experience from the get-go. Fail to provide companies with a simple and intuitive way to onboard their data and you can expect high rates of customer churn as a result.

Lately, Next.js has termed itself The React Framework for Production, and with such bold claim comes a bevy of features that it offers to help you take your React websites from zero to production. These features would matter less if Next.js isn’t relatively easy to learn, and while the numerous features might mean more things and nuances to learn, its attempt at simplicity, power, and perhaps success at it is definitely something to have in your arsenal.

As you settle in to learn about Next.js, there are some things you might already be familiar with and you might even be surprised at how it gives you a lot to work with that it might seem almost overwhelming at face value. Next.js is lit for static sites and it has been well-engineered for that purpose. But it also takes it further with its

With so much happening in front-end and UX these days, it can be quite difficult to keep track of important things. Luckily, there are wonderful newsletters and blogs out there that shed light on the latest in the web industry. In fact, with our weekly Smashing Email Newsletter, we aim to achieve that as well.

Every week, we send out useful front-end & UX tips, techniques and tools to help you get better at your work. We couldn’t be more grateful for the trust of 190,000 designers and web developers who are already subscribed. And if you aren’t yet, now there is a good reason to join in!

Your (smashing) email

Design, front-end & UX. 1× a week.
You can always unsubscribe with just 1 click.

One of the best ways to reduce time spent pushing pixels in Figma is to use some of the countless plugins that can do the work for you. Figma has added some amazing functionality recently to help with our workflows but plugins still fill in the gap for many tedious, repetitive daily tasks. This practical article is an attempt to highlight the most useful plugins that I use often to make my design process faster and more smooth.

Finding Figma Plugins

The amount of time we, as interface designers, spend clicking, selecting, renaming, moving, updating, and otherwise tweaking our designs in 2020 is surprising (and often frustrating). This is an unavoidable part of our jobs, even with all the AI design generating magic available today. However, any minutes or hours that we are able to save on moving pixels can be spent improving the design quality, growing as designers, or just enjoying life outside of design (I know, design is life, but...).

We’re talking about TypeScript. What is it, and how can it help us write better JavaScript? I spoke to expert Stefan Baumgartner to find out.

Show Notes

• Stefan’s book TypeScript in 50 Lessons is available now
• Official site for TypeScript
• Stefan on Twitter
• Stefan’s personal website

Weekly Update

• “React Form Validation With Formik And Yup”
  written by Nefe Emadamerho-Atori
• “Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase”
  written by Kelly Schummer
• “Build And Deploy An Angular Form With Netlify Forms And Edge”
  written by Zara Cooper
• “Managing Long-Running Tasks In A React App With Web Workers”
  written by Chidi Orji
• “Supercharge Testing React Applications With Wallaby.js”
  written by Kelvin Omereshone

Before the invention of CI/CD (Continuous Integration and Continuous Deployment & Delivery), software was generally developed by writing the code using a computer whenever it was time to move the software to production. The RedHat website defines CI/CD to be “a method to frequently deliver apps to customers by introducing automation into the stages of app development. The main concepts attributed to CI/CD are continuous integration, continuous delivery, and continuous deployment.”

In other words, CI/CD is a process that replaces the traditional/manual ways of building and deploying software applications. The CI/CD process is automated and executed once a trigger is met. The trigger is mostly attached to a new git commit to ensure that the latest version of a repository’s code is built and deployed with minimal effort to the developer.

Whether you’re motivated to get started with creating artworks through code or instead find yourself spending too much time getting upset over ugly website policy disclosure pages, we always like to have your back. Here at Smashing, we are committed to nourishing curiosity on what works and what doesn’t, helping folks improve thier skills and workflows, and last but not least, finessing their work-life balance.

The best way to get better together is by learning from each other, and what better way is there than to promote new ideas and the way forward for the web industry. A quick peek at our ever-growing guides will show you that we’re dedicated in bringing together a variety of topics that will help us all explore and learn new things.

You can always 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.

One thing you will discover very quickly when you start writing tests for an application is that you want to run your tests constantly when you are coding. Having to switch between your code editor and terminal window (or in the case of VS Code, the integrated terminal) adds an overhead and reduces your productivity as you build your application. In an ideal world, you would have instant feedback on your tests right in your editor as you are writing your code. Enter Wallaby.js.

What Is Wallaby.js?

Wallaby.js is an intelligent test runner for JavaScript that continuously runs your tests. It reports code coverage and other results directly to your code editor immediately as you change your code (even without saving the file). The tool is available as an editor extension for VS Code, IntelliJ Editors (such as WebStorm and IntelliJ IDEA), Atom, Sublime Text, and Visual Studio.

Response time is a big deal when it comes to web applications. Users demand instantaneous responses, no matter what your app may be doing. Whether it’s only displaying a person’s name or crunching numbers, web app users demand that your app responds to their command every single time. Sometimes that can be hard to achieve given the single-threaded nature of JavaScript. But in this article, we’ll learn how we can leverage the Web Worker API to deliver a better experience.

In writing this article, I made the following assumptions:

1. To be able to follow along, you should have at least some familiarity with JavaScript and the document API;
2. You should also have a working knowledge of React so that you can successfully start a new React project using Create React App.

If you need more insights into this topic, I’ve included a number of links in the “Further Resources” section to help you get up to speed.

First, let’s get started with Web Workers.

Creating the frontend, backend, and deployment workflow of an app takes a lot of work. In instances where your app collects only a limited amount of data submissions from its users, building a whole backend may not seem worth the time and effort. An alternative to developing a complete backend is using Netlify Forms. In this tutorial, I’ll explain how you could use an Angular reactive form with Netlify Forms. Since Netlify Forms only work when deployed on Netlify, I’ll also illustrate how to deploy your app on Netlify Edge.

Regardless of where you live, getting your driver’s license renewed or the address updated on your personal ID card may often be a painful chore. It’s such a frustrating experience that Disney’s Zootopia movie (IMDb) thought it best to represent DMV employees as sloths. Despite popular opinion, however, the California DMV (California Department of Motor Vehicles) is highly motivated to better serve the 30 million licensed drivers in California.

Better serving those citizens means improving a frustrating website experience — the primary way Californians access necessary services. That’s why the DMV Strike Team hired our design team at 10up to reimagine the entire California DMV website.

In the following case study, we’ll take a close look at a design exercise that we call internally Design Shopping. This exercise allows us to better communicate with the client and to more easily move our collaboration in the right direction.

As developers, it is our job to ensure that when users interact with the forms we set up, the data they send across is in the form we expect.

In this article, we will learn how to handle form validation and track the state of forms without the aid of a form library. Next, we will see how the Formik library works. We’ll learn how it can be used incrementally with HTML input fields and custom validation rules. Then we will set up form validation using Yup and Formik's custom components and understand how Yup works well with Formik in handling Form validation. We will implement these form validation methods to validate a simple sign up form I have set up.

Note: This article requires a basic understanding of React.

Immersive experiences, especially those governed by mixed reality (XR), which encompasses both augmented and virtual reality, are quickly gaining new attention among developers and architects interested in reaching users and customers in novel ways. For many years, the lack of adoption of mixed reality experiences came down to hardware — too expensive and unwieldy — and software — too complex and finicky to use.

But the Coronavirus pandemic may be scrambling all of those old calculations by encouraging the sorts of experiences that are mostly limited to the gaming world, which is seeing immense growth in playing time during the current crisis. The math behind three-dimensional spaces can also present barriers to developers, but fortunately, you need only a little vector geometry and matrix math to succeed with XR experiences, not a college course in linear algebra and multivariate calculus.

By leveraging React-Apollo, this article focuses on how a file upload functionality can be added to a new or existing front-end application being powered by a GraphQL API. To achieve this, we would build this demo application which allows users to upload a profile image when creating an account alongside their preferred username. While we do this, we would gradually work through the process of :

• Creating a Node GraphQL backend application capable of accepting and sending the uploaded file to a Storage Bucket within the Google Cloud.
• Setting up a connection to the Google Cloud Storage.
• Collecting files inputs in a React Application and sending them to a GraphQL backend application using React Apollo.

Note: Although all code snippets are explained, to fully understand them you should have an understanding of JavaScript's es6 syntax, GraphQL and React.js.

Every other day, one of your team members makes a case for switching from “chaotic” JavaScript to “sane” TypeScript. Maybe you rely on not-very-well-understood JavaScript libraries, or you have a large number of contributors, or the code base is difficult to maintain. The reasons are always similar, but so is the hesitance from the team. Why change the stack that seems to be working just fine?

That's the question we've asked ourselves as well. So we've teamed up with Stefan Baumgartner, a seasoned JavaScript developer drawn to TypeScript for years, to break it all down into understandable pieces. The result is 50 short lessons on TypeScript — our shiny new book, with everything TypeScript explained, from start to finish.

• Jump to table of contents ↓
• Download a free sample PDF (2.3 MB).

In July the Wikimedia Foundation announced Abstract Wikipedia, an attempt to markup knowledge that is language-independent. In many respects, this is the culmination of decades of buildup, during which the dream of a Semantic Web has never quite taken off, but never quite disappeared either.

As a matter of fact the Semantic Web is growing, and as it renews its mission we all stand to gain from incorporating semantic markup into our websites, be they personal blogs or social media giants. Whether you care about sophisticated web experiences, SEO, or fending off the tyranny of web monopolies, the Semantic Web deserves our attention.

The benefits of developing for the Semantic Web are not always immediate, or visible, but every site that does strengthens the foundations of an open, transparent, decentralized internet.

It’s not like consumers aren’t interested in the information provided on terms of use or privacy policy pages. But these pages… Talk about a painful design.

As a web designer, you know that data privacy and security concerns affect how visitors interact with the websites you build. That’s why you build trustmarks into your websites in the first place.

But the sheer presence of “Terms of Use” or “Privacy Policy” links isn’t enough to put visitors at ease. These pages need to be easy to read or, at the very least, easy enough to pull out pertinent details from.

If you’re not in the habit of doing so already, you need to start designing your policy pages in a way that website visitors don’t feel so discouraged that they blindly accept the terms and put themselves at risk.