Why Do Some HTML Elements Become Deprecated?
The internet has been around for a long while, and over time we’ve changed the way we think about web design. Many old techniques and ways of doing things
Django Highlights: Templating Saves Lines (Part 2) — Smashing Magazine
Creating front-end code in Django with templating and server-side rendering combines the fine-grained control of handwritten HTML with the clean code and powerful features of generated pages. We explore breaking down a complex webpage into multiple templates, composing those components, and applying tags and filters to refactor a plain HTML page.
Performant Expandable Animations: Building Keyframes on the Fly
Animations have come a long way, continuously providing developers with better tools. CSS Animations, in particular, have defined the ground floor to solve
Building A Web App With Headless CMS And React — Smashing Magazine
In this article, Blessing Krofegha introduces the concept of the headless CMS, a backend-only content management system that allows developers to create, store, manage and publish the content over an API. It gives developers the power to quickly build excellent user experiences, free from the worry of its impact on the back-end business logic.
4 CSS Grid Properties (and One Value) for Most of Your Layout Needs
CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout
Announcing “use-sound”, a React Hook for Sound Effects
By and large, using the web is a visual experience. This is in terrible contrast to mobile apps, which interact with three of our human senses (sight, sound, and touch, through haptic feedback). I just released a library to make it easy to add sound to your React app, and I make the case that you should consider using it!
Creating a Pencil Effect in SVG
Scott Turner, who has an entire blog "Exploring procedural generation and display of fantasy maps", gets into why vector graphics seems on these surface why
How to use CSS Scroll Snap
Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling
Migrating to React land: Gatsby
As our developer documentation grows so does the need for tooling. Let’s walk through how we migrated our documentation site to Gatsby to take full advantage of static generation and React.
How to Animate Text with SVG and CSS
The other day I was helping my pal Jez work on Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word “enthusiasm” in
CSS Viewport Units
Deep dive from Ahmad. I like the coverage of vmin and vmax, which I think I don't reach for as often as I should.
Auto-Growing Inputs & Textareas
By default, <input> and <textarea> elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS way
How Should Designers Learn To Code? Git, HTML/CSS, Engineering Principles (Part 2) — Smashing Magazine
In [Part 1](https://www.smashingmagazine.com/2020/03/designers-code-terminal-text-editors-part-1/), Paul explained the basics of the terminal, shared a few productivity hacks to get you started, and how to choose a code editor. In this part, he’ll continue with the topics of version control (Git), HTML and CSS, semantic code, and a brief introduction to some key engineering principles.
Building a Real-Time Chat App with React and Firebase
In this article, we’ll cover key concepts for authenticating a user with Firebase in a real-time chat application. We’ll integrate third-party auth providers
Inspired Design Decisions With Otto Storch: When Idea, Copy, Art And Typography Became Inseparable — Smashing Magazine
In this seventh instalment of Inspired Design Decisions, Andy Clarke will explore how American art director and graphic designer Otto Storch inspires his designs for the web. How do we use CSS Shapes to go beyond basic shapes to add energy to our designs? How do we use rotations on text for extra impact? How can we use mirroring and reflections to add interest to a design? In this article, we’ll e
How to test custom React hooks
Get confidence your custom React hooks work properly with solid tests.
Creating Sortable Tables With React — Smashing Magazine
Making your tables sortable in React might sound like a daunting task, but it doesn’t have to be too difficult. In this article, Kristofer Giltvedt Selbbekk is going to show you how to implement all you need to sort out all of your table sorting needs. By the end of this tutorial, you will have found a way to model your state, wrote a generic sorting function, and wrote a way to update what our so
React Suspense in Practice
This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We'll look at how to integrate routing
A Practical Overview Of CSS Houdini — Smashing Magazine
Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell the browser how to apply CSS during a render process. Houdini’s browser support is improving
Tools for Optimizing SVG
This is our straight-to-the-point list of SVG optimizing tools across a number of categories. They are all largely based around SVGO, but how you use it depends. There are web apps, desktop apps, apis, and even design tool add-ons.
Implementing Infinite Scroll And Image Lazy Loading In React — Smashing Magazine
HTML is getting better at providing nice APIs for implementing cool features. In this tutorial, Chidi Orji is going to show you how to use the `HTML` `Intersection Observer` API to implement infinite scrolling and image lazy loading in a React functional component. In the process, we’ll learn how to use some of React’s hooks and how to create Custom Hooks. Let’s get started!
Get Started Building GraphQL APIs With Node
We all have a number of interests and passions. For example, I’m interested in JavaScript, 90’s indie rock and hip hop, obscure jazz, the city of Pittsburgh,
Two Steps Forward, One Step Back
Brent Jackson says CSS utility libraries failed somewhat:
Node Photo Gallery Tutorial
A step by step tutorial to creating a photo gallery using Node.js and the Dropbox JavaScript SDK
Photo gallery tutorial with tags using the File Properties API
Tutorial using the Azure Face Recognition API, the DBX File Properties API, and the DBX JavaScript SDK to build a photo gallery with tags.
Getting different sizes of thumbnails using the JavaScript Chooser
How uses Dropbox as a file backend for JavaScript apps
Some love for JavaScript applications
Quickly integrate file upload in your app using the Dropbox Chooser
The Dropbox Chooser is an easy-to-implement, pre-built component that allows users to access their Dropbox files from within your app.
Adventures in CSS Semi-Transparency Land
Recently, I was asked to make some tweaks to a landing page and, among the things I found in the code, there were two semitransparent overlays — both with the
Simplifying view updates in JavaScript with the Datastore API
Should I useState or useReducer?
Two built-in React hooks that handle state, which one should you use?
Setting Height And Width On Images Is Important Again — Smashing Magazine
Thanks to some recent changes in browsers, it’s now well worth setting `width` and `height` attributes on your images to prevent layout shifts and improve the experience of your site visitors. Barry Polland loves improvements that just work without any effort required of website owners. That is not to ignore the hard work required by the browser developers and standardization teams, of course, but
Writing a file with the Dropbox JavaScript SDK
Checking the datastore sync status in JavaScript
Currying in CSS
Funny timing on this I was just looking at the website for Utopia (which is a responsive type project which I hate to admit I don't fully understand) and I
Avoid Keyboard Event-Related Bugs In Browser-Based Transliteration — Smashing Magazine
Transliteration is a popular way to input non-English characters using an English keyboard. The typical method of implementing this is via keyboard event capturing but there’s no uniform support from mobile browsers. In this article, Sandamal Siripathi explains a new method to eliminate such browser-related problems when developing web apps that use transliteration.
Introducing Alpine.js: A Tiny JavaScript Framework — Smashing Magazine
Ever built a website and reached for jQuery, Bootstrap, Vue.js or React to acheive some basic user interaction? Alpine.js is a fraction of the size of these frameworks because it involves no build steps and provides all of the tools you need to build a basic user interface. Today, Phil Smith is going to take a closer look at Alpine.js and how it can replace JQuery or larger JavaScript libraries to
What React Does (and Doesn't Do)
With a name as big as React, it's bound to cause some Stream-Crossing Confusion, as I like to call it. How do you center a <div> in React? Dave Ceddia:
How We Created a Static Site That Generates Tartan Patterns in SVG
Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan
Why Are We Talking About CSS4? — Smashing Magazine
Around the web and within the CSS Working Group, there has been some discussion about whether we should specify a version of CSS — perhaps naming it CSS4. In this article, Rachel Andrew rounds up some of the pros and cons of doing so, and asks for your feedback on the suggestion.
Making Things Better: Redefining the Technical Possibilities of CSS
Robin recently lamented the common complaint that CSS is frustrating. There are misconceptions about what it is and what it does. There are debates about what
4 Ways to Animate the Color of a Text Link on Hover
Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors.
Vue.js: The Documentary
Hey how cool! A documentary about Vue! Good timing as it looks like VueConf is happening right now. (Reminder we have a site for conferences to tell you stuff
Selectors Explained
Have you ever found yourself either writing a CSS selector that winds up looking confusing as heck, or seen one while reading through someone's code? That
The Perils of Hydration
A surprisingly-common misconception can lead to big rendering issues that are difficult to debug. This deep-dive tutorial examines how React and Gatsby can be used to pre-render content, and how we can work around the constraints to build dynamic, personalized web apps.
Project LightSpeed: Rewriting the Messenger codebase for a faster, smaller, and simpler messaging app
We are excited to begin rolling out the new version of Messenger on iOS. To make the Messenger iOS app faster, smaller, and simpler, we rebuilt the architecture and rewrote the entire codebase, which is an incredibly rare undertaking and involved engineers from across the company. Compared with the previous iOS version, this new Messenger […]
Why is CSS Frustrating?
Here’s a great thread by Kevin Powell that's making the rounds. He believes so many folks see CSS as a frustrating and annoying language:
When CSS Blocks
Tim Kadlec:
Creating Native Components That Accept React Native Subviews - Shopify
This guide will show you how to make a native component that provides bottom sheet functionality to React Native and renders React views inside.
Pages for Likes
I posted about parsing an RSS feed in JavaScript the other day. I also posted about my RSS setup talking about how Feedbin is at the heart of it.
Persisting React State in localStorage
A common thing in React development is that we want to store a bit of React state in localStorage, and re-initialize from that value on the next page-load. This quick tutorial shows you how we can build a custom hook that does exactly this!
Setting Up Tailwind CSS In A React Project — Smashing Magazine
In this article, Blessing Krofegha introduces Tailwind CSS, a CSS library that gives you all of the building blocks you need to build bespoke designs without opinionated styles. With Tailwind CSS, you get to create the components that suit what you want or what you are working on. These components can be created by harnessing the power of the utility-first prowess of Tailwind CSS. You’ll also lear
Animate SVG Path Changes in CSS
Every once in a while I'm motivated to attempt to draw some shapes with <path>, the all-powerful drawing syntax of SVG. I only understand a fragment of
How To Use The HTML Drag-And-Drop API In React — Smashing Magazine
In this tutorial, Chidi Orji will show you how to build a React drag-and-drop component for file and image uploads. In the process, we’ll learn about the HTML drag-and-drop API. We will also learn how to use the useReducer hook for managing state in a React functional component.
How to Build Vue Components in a WordPress Theme
The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.
How To Make Cross-Browser Testing More Efficient With LambdaTest — Smashing Magazine
Whether you’re building a new site or you’re managing a live one, you can’t afford to make any changes without a process for cross-browser testing and a tool to do the heavy lifting for you. LambdaTest’s wide array of tests are the answer. From fully automated cross-browser tests to semi-automated tasks, we’re going to explore a much more efficient way to review your websites and all their browser
HTML Data Attributes Guide
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
Moving from Vanilla JavaScript to a Reusable Vue Component
I recently wrote an article explaining how you can create a countdown timer using HTML, CSS and JavaScript. Now, let’s look at how we
Links and Buttons Guide
Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.