Join Us For Smashing Meets Happy Holidays — Smashing Magazine
Meet our new friendly online meet-up, Smashing Meets, with three wonderful speakers, the entire Smashing family and plenty of truly smashing cats. As always, free for Smashing Members.
How To Migrate From WordPress To The Eleventy Static Site Generator — Smashing Magazine
If you’re a designer or developer with intermediate knowledge of HTML and JavaScript, and know your way around GitHub and the command line, this tutorial is for you. Today, Scott Dawson is going to walk step-by-step through converting a WordPress site into a static site generated from Markdown.
CommonMark: A Formal Specification For Markdown — Smashing Magazine
Markdown is a powerful markup language that allows editing and formatting in plain text format that can then be parsed and rendered as HTML. It has a declarative syntax that is both powerful and easy to learn for technical and non-technical folks. However, due to the consequential ambiguities in its original specification, there have been a number of distinct [flavors (or custom versions)](https:/
Designing An Attractive And Usable Data Importer For Your App — Smashing Magazine
Even though the development of a data importer is a complex matter, you don’t want your users’ experience with it to be just as complex or complicated. The second they experience any friction or fault in data onboarding, the chances of them bailing from the software will skyrocket. So, in this post, we’re going to focus on how best to present your data importer to users.
Smashing Podcast Episode 30 With Chris Murphy: What Is Product Design? — Smashing Magazine
In this episode, we’re talking about Product Design. What does it mean to be a product owner, and how can you learn the skills required? Drew McLellan talks to expert Chris Murphy to find out.
Weaving Web Accessibility With Usability — Smashing Magazine
You can provide access to people with visual impairments without involving them in the product development lifecycle, by formally adopting web accessibility standards... but does that mean the end product is usable? In this article, Uri Paz explains how a site complying with accessibility guidelines may still present usability issues when testing with real users. Find out how weaving accessibility
Dreaming Of A Magical December (2020 Wallpapers Edition) — Smashing Magazine
Let’s welcome December with some new wallpapers! Designed by artists and designers from across the globe, they are available with and without a calendar for the month. All images can be clicked on and lead to the preview of the wallpaper. We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their
Reactive Variables In GraphQL Apollo Client — Smashing Magazine
Reactive variables work with GraphQL Apollo and offer you the same functionality with Redux or Context API without the complexity or extra layers that come with these other tools. A reactive variable in GraphQL Apollo is easy to use and doesn’t have as much setup process compared to Redux. In this article, Daniel Don will look at how to set up reactive variables, how the GraphQL cache polices come
Copy Docs: Make Your Microcopy Full And Consistent, And Maintain It — Smashing Magazine
Copy docs is a framework that allows product designers and writers to manage their in-product copy in a smart way. In this article, Valeriia Panina shares her experience in how the copy docs technique turned out to be a game changer for her workflow. The copy docs technique was a game changer for Valeriia’s workflow and she’d be happy if it boosts yours, too!
Playfulness In Code: Supercharge Your Learning By Having Fun — Smashing Magazine
In the product-focused world of development, it can be easy to forget the joy of making for the sake of making. By dropping the ‘Why’ and ‘How’, and focusing instead on the ‘What’ of weird, wonderful ideas, you can nurture a totally different side to your skill sets. You can read the docs, you can follow the tutorials, but wouldn’t you be more motivated by trying to make something unique, somethin
Testing Vue Applications With The Vue Testing Library — Smashing Magazine
The Vue Testing library can help you to test your applications by mirroring the way that a user would interact with them. Here’s everything you need to know if you want to get started right away. In this article, Kelvin Omereshone will look at testing Vue applications using the Vue Testing Library — a lightweight library that emphasizes testing your front-end application from the user’s perspectiv
A Comparison Of async/await Versus then/catch — Smashing Magazine
In JavaScript, there are two main ways to handle asynchronous code: then/catch (ES6) and async/await (ES7). These syntaxes give us the same underlying functionality, but they affect readability and scope in different ways. In this article, Bret Cameron will show you how one syntax lends itself to maintainable code, while the other puts us on the road to callback hell!
What A Time To Be Smashing! — Smashing Magazine
With so much going on, it’s nice to have an overview of what’s new at Smashing — all in one place. Read on to find out what’s been keeping the team busy alongside some inspiring community resources that have made it to the top list of our newsletters!
A Thoughtful Way To Use React’s useRef() Hook — Smashing Magazine
In a React component, `useState` and `useReducer` can cause your component to re-render each time there is a call to the update functions. In this article, you will find out how to use the `useRef()` hook to keep track of variables without causing re-renders, and how to enforce the re-rendering of React Components.
Standardizing Select And Beyond: The Past, Present And Future Of Native HTML Form Controls — Smashing Magazine
Working with native HTML Form Controls has been such a pain point for web developers, from styling to extending them, the limitations are so great that countless dev hours have been spent recreating them. But why are form controls so difficult to work with? In this article, Stephanie dives into the past by going back to the beginning of HTML and tracing the evolution of form controls through to th
Making Sense Of TypeScript, In 50 Lessons — Smashing Magazine
Meet our new practical guide on everything you need to know about TypeScript, its type system, and all its benefits in 50 lessons. Jump to table of contents and get the book right away.
Smashing Podcast Episode 29 With Leslie Cohn-Wein: How Does Netlify Dogfood The Jamstack? — Smashing Magazine
We’re asking what it looks like to dogfood the Jamstack at Netlify. Can you deploy an entire app to a CDN? Drew McLellan talks to Netlify Staff Engineer Leslie Cohn-Wein to find out.
Creating A Continuous Integration Test Workflow Using GitHub Actions — Smashing Magazine
The convention when contributing to projects on version control platforms is that there is the main branch containing the functional codebase. Then, there are other branches in which several developers can work on copies of the main to either add a new feature, fix a bug, and so on. If there is any error, it can easily be traced and fixed before integrating the changes into the main branch. It can
What’s New In Vue 3? — Smashing Magazine
Vue 3 comes with a lot of interesting new features and changes to some of the existing ones that are aimed at making development with the framework a lot easier and maintainable. In this article, we’re going to take a look at some of these new features and how to get started with them. We’re also going be taking a look at some of the changes done to the existing features.
From The Experts: Global Digital Accessibility Developments During COVID-19 — Smashing Magazine
Robin Christopherson MBE, Head of Digital Inclusion at UK tech experts AbilityNet, has been hosting a series of monthly webinars with senior accessibility guests from global brands such as Microsoft and ATOS, and UK giants like Barclays and Sainsbury’s. They’re talking COVID, the challenges and opportunities the crisis brings, agile adjustments, digital inclusion and much, much more. Want food for
Authenticating React Apps With Auth0 — Smashing Magazine
An important aspect of app development is ensuring that only verified users have access to our apps. This can be tedious and costly do, especially when you add alternative methods of logging in outside emails and passwords. Auth0 is a service that provides authentication functionalities to developers out of the box. In this article, we’ll learn how to authenticate our React apps using Auth0. We wi
Best Practices For E-Commerce UI Design — Smashing Magazine
The goal of e-commerce design is to create interfaces that won’t get in the way of the overall shopping experience. In this post, Suzanne Scacca is going to look at three key parts of a digital store and show you what you can do to design each to help customers more quickly and effortlessly get to the checkout stage.
A Dive Into React And Three.js Using react-three-fiber — Smashing Magazine
`react-three-fiber` is a powerful Three.js renderer that helps render 3D models and animations for React and its native applications. Today, Fortune Ikechi is going to show you how to configure and use react-three-fiber for building and displaying 3D models and animations in React and React Native applications. By building our 3D ludo dice box, you’ll learn about the basics of Three.js alongside i
Building Serverless Front-End Applications Using Google Cloud Platform — Smashing Magazine
The use of serverless applications by developers to handle the business logic of their applications in on the high increase, but how does the Google Cloud — a major service provider within the public cloud — allow developers to manage serverless applications? In this article, you will learn what serverless applications are, how they are used on the Google Cloud, and also scenarios in which they ca
Data Visualization With ApexCharts — Smashing Magazine
In this article, you will be exposed to ApexCharts and to the different types and variants of charts it provides. Along the way, we’ll build several types of charts and learn how we can customize the appearance of our charts. By the end of the article, you will be able to integrate different types and variants of chats in your applications with ApexCharts.
Internationalization And Localization For Static Sites — Smashing Magazine
Internationalization and localization is more than just writing your content in multiple languages. You need a strategy to determine what localization to send, and code to do it. You need to be able to support not just different languages, but different regions with the same language. Your UI needs to be responsive, not just to screen size, but to different languages and writing modes. Your conten
What Can Web Designers Do With Their Unused Designs? — Smashing Magazine
Do you have a hard time throwing away mockups, logos and other content you’ve created for clients? The good news is that you don’t have to see rejected or unused designs as a sign of failure or waste. You can actually repurpose them and give them new life on other projects, for other customers, and even within your own business. I’ll explain four ways to do this in this post.
Smashing Podcast Episode 28 With David Darnes: What Is Eleventy? — Smashing Magazine
In this episode of The Smashing Podcast, we’re talking about Eleventy. What is it and how does it fit into your Jamstack workflow? I spoke to David Darnes to find out.
Native CSS Masonry Layout In CSS Grid — Smashing Magazine
There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew will explain the draft spec, with examples that you can try out in Firefox Nightly. While this is a feature you won’t be able to use in production right now, your feedback would be valuable to help make sure it serves the requirements that you have for this kind of layout. So
Be Kind, Be Curious (November 2020 Wallpapers Edition) — Smashing Magazine
Give your desktop a makeover with this new collection of wallpapers. Designed by the community for the community, the wallpapers come in versions with and without a calendar for November 2020. Since so many beautiful and inspiring designs have seen the light of day as a part of this ongoing series, we browsed through our archives on the look for November goodies from the past. You’ll find a select
The Principles Of Visual Communication — Smashing Magazine
We’re taught to communicate with words. We write essays, prepare speeches, and take written notes. But words aren’t always the best option for conveying information and ideas. Sometimes the best way to tell stories is through thoughtfully crafted visuals, not long paragraphs of text. Visual storytelling is the process of conveying ideas using things you can see. In this article, Elizabeth Lin will
How To Build A GraphQL Server Using Next.js API Routes — Smashing Magazine
With this guide, Ibrahima Ndaw will teach you the basics of Next.js API Routes. He will start by explaining what they are and why API Routes are useful compared to REST or GraphQL APIs. Then, he will guide you through a step by step tutorial on how to build your very first GraphQL server with Next.js and the Github API. If you want to extend your React or Next.js skills to the server-side and be a
How We Run Online Workshops — Smashing Magazine
Many companies had to struggle in one way or another in the last couple of months. We had to get creative, and we had to rethink our conferences and workshops altogether. In this article, CEO and co-founder Vitaly Friedman shares how Smashing runs online workshops and online conferences these days, and the lessons learned along the way.
Authentication In Vue.js — Smashing Magazine
Every web application that handles user-specific data needs to implement authentication. Knowing how to do this is important for Vue developers, and that’s what this article aims to shed the spotlight on. Today, Precious Ndubueze brings you a tutorial that will prove to be useful for beginner developers who want to learn about authentication in Vue. In order to be able to follow along, you’ll need
Introducing Framer Motion — Smashing Magazine
Animations, when done right, are powerful. However, creating eye-catching animations with CSS can be tricky. In comes Framer Motion. With Framer Motion, you don’t need to be a CSS expert to make beautiful animations. Framer Motion provides us with production-ready animations and a low-level API we can interact with to integrate these animations into our applications.
How To Overcome Data Onboarding Challenges For Software Products — Smashing Magazine
Data onboarding with a custom-built solution can be a difficult and error-prone process. Now imagine what happens when you increase the complexity, allowing for different file types, more users, varying sources and a greater need for security and compliance. It shouldn’t be up to your software end users to work out the kinks of your data onboarding, nor should your team have to do it. In this post
Getting Started With Next.js — Smashing Magazine
Next.js is a React framework that is bound to ease your life as a React developer by abstracting away the common and redundant tasks (such as routing) into relatively simpler and powerful APIs. That way, you can focus on writing your apps instead of reinventing the wheel. This tutorial will be beneficial to developers who are looking to get started with Next.js or have already begun but need to fi
Smashing Giveaway: Join Smashing Newsletter and Win Smashing Prizes — Smashing Magazine
We’re running a lil’ giveaway among our dear Smashing newsletter subscribers, and if you subscribe, you join in the raffle, too! With online workshop tickets, books and an entire collection of 100 Smashing cats in SVG format! We’ll announce the winners in the upcoming issue on Oct. 27, 2020. Meow, join in and good luck!
Speed Up Your Workflow With Figma Plugins — Smashing Magazine
There are hundreds of Figma plugins available as of today, yet the Figma plugin search functionality is pretty basic and at times it can be very difficult to find the right plugin for a certain task. Today, Abel Hancock will take you into an in-depth look at several plugins that can speed up your design workflow. **Note**: *This article is aimed at user interface designers who use Figma on a daily
Smashing Podcast Episode 27 With Stefan Baumgartner: What Is TypeScript? — Smashing Magazine
We’re talking about TypeScript. What is it, and how can it help us write better JavaScript? Drew McLellan talks to expert Stefan Baumgartner to find out.
Handling Continuous Integration And Delivery With GitHub Actions — Smashing Magazine
In this article, Aleem Isiaka explains how you can deploy a basic NodeJS application to Heroku, automate and schedule a deployment to run at certain intervals of the day, and use other actions from the Github Actions community.
A Monthly Update With New Guides And Community Resources — Smashing Magazine
It’s time for another monthly update! 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. Join us as we share the lates
Supercharge Testing React Applications With Wallaby.js — Smashing Magazine
Ever had to switch your focus from your editor and to your terminal to see the results of your tests? This article will introduce you to Wallaby.js — a JavaScript productivity tool that supercharges your IDE by allowing you to get real-time feedback on your JavaScript tests in your code editor even before saving the file. You will also learn how to use Wallaby.js for testing React applications. No
Managing Long-Running Tasks In A React App With Web Workers — Smashing Magazine
In this tutorial, Chidi Orji is going to show you how to use the [Web Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) to manage time-consuming and UI-blocking tasks in a JavaScript app by building a sample web app that leverages Web Workers. Finally, we’ll end the article by transferring everything to a React application. If you need more insights into this topic, Chi
Build And Deploy An Angular Form With Netlify Forms And Edge — Smashing Magazine
Netlify Forms is a form handling feature that receives submissions from HTML forms automatically. In this article, Zara Cooper will explain how you could use an Angular reactive form with Netlify Forms. Since Netlify Forms only work when deployed on Netlify, she’ll also illustrate how to deploy your app on Netlify Edge.
Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase — Smashing Magazine
How can you convince your clients to make a faster (and easier) buy-in? Better serving citizens means improving a frustrating website experience — the primary way Californians access necessary services. With the help of a guided design exercise, Kelly Schummer explains how the *Design Shopping* workflow can help guide you throughout the design phases.
React Form Validation With Formik And Yup — Smashing Magazine
Forms are an integral part of how users interact with our websites and web applications. Validating the data the user passes through the form is a critical aspect of our jobs as web developers. However, it doesn’t have to be a pain-staking process. In this article, Nefe Emadamerho-Atori will show you how Formik handles the state of the form data, validates the data, and handles form submission.
Using WebXR With Babylon.js — Smashing Magazine
In this overview of WebXR technologies and the Babylon.js framework, we’ll embark on a journey through the past, present, and future of mixed reality both on the web and on immersive headsets. We’ll inspect the underpinnings of WebXR and the most important aspects of the WebXR Device API before turning our attention to Babylon.js, a framework for building immersive applications in JavaScript for w
How To Manage File Uploads In React With Google Storage And GraphQL — Smashing Magazine
From a user’s profile picture to other media assets, data collection and storage to cloud services through file uploads have become an essential feature for most modern applications. Today, Nwani Victory will show you how to file uploads that can be implemented in a GraphQL application. This article will be beneficial to developers who are interested in or considering using Google Cloud Storage fo
Master TypeScript In 50 Short Lessons — Smashing Magazine
Meet our new book, “TypeScript in 50 Lessons”, a deep-dive to understand what TypeScript is, how it works, and how you can make it work for you. With code walkthroughs, hands-on examples and common gotchas. 464 pages. Jump to table of contents and get the book right away.
Developing For The Semantic Web — Smashing Magazine
The dream of a machine-readable Internet is as old as the Internet itself, but only in recent years has it really seemed possible. 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. As major websites take strides towards data-fying their content, now’s the perfec
Do Website Policy Disclosure Pages Always Have To Be So Ugly? — Smashing Magazine
In some instances, privacy policy, terms of use, and cookie consent pages do have to be ugly. But that doesn’t mean you can’t improve upon how easy they are to read or navigate (which visitors will definitely appreciate). Today, we’re going to look at four ways that web designers can contribute to getting more policy disclosure pages read and terms actually agreed to.
Smashing Podcast Episode 26 With Natalia Tepluhina: What’s New In Vue 3.0? — Smashing Magazine
We’re talking all about VueJS. What’s new in the 3.0 release, and how hard will it be to migrate? Drew McLellan talks to core team member Natalia Tepluhina to find out.
Useful Tools In Vue.js Web Development — Smashing Magazine
There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier. Today, Timi Omoyeni is going to show you a few of these libraries, what they do, and how to use them during development. This tutorial is aimed at beginners that either just started learning about Vue or alr
How To Use Face Motion To Interact With Typography — Smashing Magazine
In this article, Edoardo Cavazza will show you how to use face recognition with Tensorflow in order to extract some information from the camera, such as the distance between the screen and user’s face or the amount of people reading the page. Then, we will pass those data to CSS in order to adapt typography and to adjust the page layout.
Understanding TypeScript Generics — Smashing Magazine
An introduction to the utilization of Generics in TypeScript with examples grounded in real-world use cases, such as collections, approaches to error handling, the Repository Pattern, and so on. With this article, Jamie Corkhill hopes to provide an intuitive understanding of the notion of software abstraction through Generics.
5 Ways Google Analytics Helps Web Developers In UI/UX Design — Smashing Magazine
Ever wondered what all those Google Analytics code snippets are for and why your marketing team regularly asks you to add a new one? For most web developers, their involvement with Google Analytics ends with just installing the base code for pageviews. In this article, Clara Buenconsejo will look at 5 features in Google Analytics that can help web developers and designers in making a better user e
Squirrels, Ghosts, And Moonlight: Tales From October (2020 Wallpapers Edition) — Smashing Magazine
Get ready for autumn and the upcoming Halloween season with beautiful and inspiring wallpapers. Created by the community for the community, the wallpapers in this post all come in versions with and without a calendar, so no matter if you want to count down the days to a big deadline or stick with your favorite design after the month has ended, we’ve got you covered. Speaking of favorites: As a lit
Unit Testing In React Native Applications — Smashing Magazine
Unit testing has become an integral part of the software development process. It is the level of testing at which the components of the software are tested. In this article, Fortune Ikechi will show you the core principles of testing, explore various libraries for testing an application, and see how to test units (or components) of a React Native application. By working with a React Native applica
Different Ways To Design Digital Product Pages — Smashing Magazine
Digital content (eBooks, stock media and courses) can easily be advertised and sold through online marketplaces. But your clients won’t make as much money that way and really can’t control how their products are marketed. By designing digital product pages for smartphone users who are in that early discovery and research phase, your clients can make more money off of their products. Today, Suzanne