A Complete Walkthrough of GraphQL APIs with React and FaunaDB
As a web developer, there is an interesting bit of back and forth that always comes along with setting up a new application. Even using a full stack web
Going Jamstack with React, Serverless, and Airtable
The best way to learn is to build. Let’s learn about this hot new buzzword, Jamstack, by building a site with React, Netlify (Serverless) Functions, and
Using Mobx As A State Manager In React Native Applications — Smashing Magazine
MobX is a battle-tested library that makes state management simple and scalable by transparently applying functional reactive programming. It treats your application like a spreadsheet, and it’s one of the many state management tools available to React developers. In this tutorial, Fortune Ikechi is going to show you how to use MobX to manage state in React Native applications by building a React
Designing a JavaScript Plugin System
WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too.
Smashing Podcast Episode 23 With Guillermo Rauch: What Is Next.js? — Smashing Magazine
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.
Leading-Trim: The Future of Digital Typesetting
Update: The leading-trim property was renamed to text-box-trim and is starting to gain browser support. You can read more about text-box-trim (as well as the
Plyr: CSS Styleable Video Player
I just stumbled across Plyr from Sam Potts, a JavaScript library for styled video players. What struck me about it is that you can list YouTube videos as the
The New CSS-Tricks Video Intro by dina Amin
You know we do video screencasts, right? It's not, like, super regular, but I have done them for a long time, still like doing them, and plan to keep doing
Mastering Props And PropTypes In React — Smashing Magazine
Props and PropTypes are an important mechanism for passing information between React components, and we’re going to look into them in great detail here. This tutorial will introduce you to the details about props, passing and accessing props, and passing information to any component using props. However, it’s always a good practice to validate the data we are getting through props by using PropTyp
CSS-Tricks Chronicle XXXIX
Hey gang! I've been fortunate enough to be a guest in a variety of different here, so I thought it was time for another Chronicle post. You know, those
What I Learned by Fixing One Line of CSS in an Open Source Project
I was browsing the Svelte docs on my iPhone and came across a blaring UI bug. The notch in the REPL knob was totally out of whack. I’m always looking to
How To Configure Application Color Schemes With CSS Custom Properties — Smashing Magazine
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
Some more CSS comics
Some more CSS comics
Better Error Handling In NodeJS With Error Classes — Smashing Magazine
You can get by in NodeJS without properly handling errors but due to the asynchronous nature of NodeJS, improper handling or errors can cause you pain soon enough. This article is for JavaScript and NodeJS developers who want to improve error-handling in their applications. Kelvin Omereshone explains the `error` class pattern and how to use it for a better, more efficient way of handling errors ac
More Control Over CSS Borders With background-image
You can make a typical CSS border dashed or dotted. For example:
What does 100% mean in CSS?
When using percentage values in CSS like this...
HTML for Subheadings and Headings
Let's say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I'd say. What HTML do
TypeScript, Minus TypeScript
Unless you’ve been hiding under a rock the last several years (and let’s face it, hiding under a rock sometimes feels like the right thing to do), you’ve
JavaScript Fatigue
From Nicholas Zakas' newsletter, on how he avoids JavaScript fatigue:
A Practical Guide To Product Tours In React Apps — Smashing Magazine
Showcasing new product features to users or familiarizing them with some UI functionality in a web app can get tedious, especially when you want users to see a lot of things. In the following guide, BLessing Krofegha will show you how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical R
Warp SVG Online
The warping is certainly the cool part here. Some fancy math literally transforms the path data to do the warping. But the UX detail work here is just as
Computed Values: More Than Meets the Eye
Browser DevTools are indispensable for us front end developers. In this article, we'll take a look at the Computed tab, a small corner of the DevTools panel
Pcicrawler: A Python-based command-line interface tool to debug PCI issues at scale
What it is: A Python-based command-line interface tool that can be used to display, filter, and export information about Peripheral Component Interconnect (PCI) or PCI Express (PCIe) buses and devices, as well as PCI topology. We built pcicrawler to diagnose and debug PCIe issues at scale and help with automation. What it does: Pcicrawler provides […]
Making Sense of react-spring
Animation is one of the trickier things to get right with React. In this post, I’ll try to provide the introduction to react-spring I wish I had when I first
The Cicada Principle, revisited with CSS variables
Lea Verou digging up the CSS trickery classic and applying it to clip the backgrounds of some code blocks:
Setting Up Redux For Use In A Real-World Application — Smashing Magazine
Redux is a robust state-management library for single-page JavaScript apps. It is described on the official documentation as a predictable state container for Javascript applications and it’s fairly simple to learn the concepts and implement Redux in a simple app. Going from a simple counter app to a real-world app, however, can be quite the jump.
Making Facebook.com accessible to as many people as possible
We recently shared the work we did to rebuild our tech stack to support the redesigned Facebook.com. When that project began, we saw an opportunity to integrate greater accessibility into the site and build it into the foundation in a way we couldn’t have done without this rebuild. The previous site had been built upon […]
Migrating Large TypeScript Codebases To Project References - Shopify
Using TypeScript enabled our ever-growing Admin teams to leverage TypeScript’s compiler to catch potential bugs and errors well before they ship.
Understanding Client-Side GraphQl With Apollo-Client In React Apps — Smashing Magazine
Ever tried interacting with a GraphQL server in a client-side application and felt like giving up even before getting anywhere? Ever declined an invitation to join a code base that requires working with GraphQL API because you had no idea? Ever felt like the only front-end engineer who hasn’t learned how to consume GraphQL APIs? If you answered yes to any of these questions, then this tutorial is
Want to get better at code? Teach someone CSS.
A friend of mine recently asked me to teach her to code. She was an absolute beginner, having no idea what coding really involves. I decided to start where I
CSS Vocabulary
This is a neat interactive page by Ville V. Vanninen to reference the names of things in the CSS syntax. I feel like the easy ones to remember are "selector,"
Create A Responsive Dashboard With Angular Material And ng2-Charts — Smashing Magazine
With Angular Material and ng2-charts, you can take advantage of schematics to cut down the effort and time you may spend building a dashboard. Schematics in Angular 9 are code generators that can create components and patterns in projects using predetermined templates and layouts. In this article, Zara Cooper explains how to take advantage of schematics in Angular Material and ng2-charts to substa
Some CSS comics
Some CSS comics
How To Use Styled-Components In React — Smashing Magazine
Styled components are “visual primitives for components”, and their goal is to give us a flexible way to style components. The result is a tight coupling between components and their styles. While the component-driven approach has ushered in a new frontier in the way we build web applications, it isn’t without its imperfections — one being its usability and scalability with CSS. This has given bir
Modern CSS Techniques To Improve Legibility — Smashing Magazine
Which aspects should we take into consideration when designing and developing for reading? How can we create accessible, comfortable, inclusive experiences for all readers, including the most challenged and those affected by dyslexia? In this article, Edoardo Cavazza will cover how we can improve websites legibility using some modern CSS techniques, great new technologies like variable fonts and p
Application State Management with React
How React is all you need to manage your application state
Building Desktop Apps With Electron And Vue — Smashing Magazine
Electron is an open-source software framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies. In this tutorial, Timi Omoyeni explains what you need to keep in mind when building a desktop application with Vue.js using the [Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/).
Translating Design Wireframes Into Accessible HTML/CSS — Smashing Magazine
The most efficient way to build accessible websites and apps is to “shift left” by incorporating accessibility testing into the earliest stages of your development and design process. In this article, Harris Schneiderman will walk you through the process of analyzing a wireframe from an accessibility perspective and making coding decisions to optimize for accessibility in both design and developme
Use react-error-boundary to handle errors in React
How to simplify your React apps by handling React errors effectively with react-error-boundary
How To Build An Accessible Front-End Application With Chakra UI And Nuxt.js — Smashing Magazine
In this article, Kelvin Omereshone is going to be looking at how to use Chakra UI and NuxtJS in building accessible front-end applications. In order to follow along, you should be familiar with using the progressive front-end framework Vue.js with Nuxt. If not, see the Vue.js and NuxtJS docs to get started. In order to make the web more accessible, there are a couple of best practices and standard
CSS Painting Order
Usually, when I see terms like "painting order" or "stacking context" my brain will start to shut off and my eyes will gloss over. Not that my brain doesn't
How to Italicize Text
HTML and CSS offer us the ability to italicize text. I’m talking about text like this. Let’s cover everything you’ll need to know.
Backdrop Filter effect with CSS
I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a
JavaScript to Know for React
What JavaScript features you should be familiar with when learning and using React
An Introduction To Stimulus.js — Smashing Magazine
In this article, Mike Rogers will introduce you to Stimulus, a modest JavaScript framework that complements your existing HTML. It allowed him to build applications in a way that feels reusable and approachable. While he doesn’t think Stimulus will take over the web like React and Vue have, he thinks it is a worthwhile tool to learn. By the end, you’ll have an understanding of the premise of Stimu
Crowdfunding Web Platform Features With Open Prioritization — Smashing Magazine
In this article, Rachel Andrew takes a look at a new effort to crowdfund the costs of implementing browser features. She encourage developers to use, talk about, and raise implementation bugs with browsers to try to get features implemented, however, what if there was a more direct way to do so? What if web developers could get together and fund the development of these features? This article is b
How To Create A Custom React Hook To Fetch And Cache Data — Smashing Magazine
There is a high possibility that a lot of components in your React application will have to make calls to an API to retrieve data that will be displayed to your users. It’s already possible to do that using the `componentDidMount()` lifecycle method, but with the introduction of Hooks, you can build a custom hook which will fetch and cache the data for you. That’s what Ademola Adegbuyi will cover
CSS Transitions In Vuejs And Nuxtjs — Smashing Magazine
Transitions are a nice way to remove, change, or update data in an application because their occurrence adds a nice effect and is good for the user experience. In this tutorial, Timi Omoyeni will look at the different ways to apply transitions in both Vue.js and Nuxt.js applications. Using these transitions in your applications and websites create a better visual experience and sometimes draws and
Frontity is React for WordPress
Some developers just prefer working in React. I don't blame them really, because I like React too. Maybe that's what they learned first. I've been using it
Next.js: Server-side Rendering vs. Static Generation
How to use Static Generation, Incremental Static Generation, and Client-side Fetching with Next.js.
A little bit of plain Javascript can do a lot
Julia Evans:
How to Make a List Component with Emotion
I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and
Displaying the Current Step with CSS Counters
Say you have five buttons. Each button is a step. If you click on the fourth button, you're on step 4 of 5, and you want to display that.
Improving Chromium's browser compatibility in 2020
This is exactly what I love to hear from any browser vendor:
CSS News July 2020 — Smashing Magazine
If you are the sort of person who doesn’t like reading about things if you can’t use them now, then this article probably isn’t for you — we have many others for you to enjoy instead! However, if you like to know what is on the way and read more about the things you can play with in a beta version of a browser, read on! Today, Rachel Andrew takes a look at some of the interesting CSS features that
Bootstrap 5
It's always notable when the world biggest CSS framework goes up a major version (it's in alpha now).
How To Test Your React Apps With The React Testing Library — Smashing Magazine
Testing gives confidence in written code. In the context of this article, ‘testing’ means ‘automated testing’. Without automated testing, it is significantly harder to ensure the quality of a web application of significant complexity. Fails caused by automated testing may lead to more bugs in production. In this article, Chidi Orji is going to show you how React developers can quickly start testin
A First Look at Reanimated 2 - Shopify
With Reanimated 2, the team at Software Mansion asked: “How would it look if there were no constraints when writing gestures and animations in React Native?” and started from there.
Differences Between Static Generated Sites And Server-Side Rendered Apps — Smashing Magazine
Statically generated sites or pre-rendering and server-side rendered applications are two modern ways to build front-end applications using JavaScript frameworks. These two modes, yet different, are often mixed up as the same thing and in this tutorial, Timi Omoyeni is going to show you the differences between them. You’ll learn what a server-side-rendered application is, as well as learn about fr
Smashing Podcast Episode 19 With Andy Bell: What Is CUBE CSS? — Smashing Magazine
We’re talking about CUBE CSS. What is it, and how does it differ from approaches such as BEM, SMACSS, and OOCSS? Drew McLellan talks to its creator, Andy Bell, to find out.