Home/2021
Archive

Year 2021

1,782 articles published in 2021.

Frontend — Image To Text Conversion With React And Tesseract.js (OCR) — Smashing Magazine

Image To Text Conversion With React And Tesseract.js (OCR) — Smashing Magazine

Do you have to process data manually because it is served through images or scanned documents? An image-to-text conversion makes it possible to extract text from images to automate the processing of texts on images, videos, and scanned documents. In this article, we look at how to convert an image to text with React and Tesseract.js(OCR), preprocess images, and deal with the limitations of Tessera

AOAyobami OgundiranAyobami Ogundiran·June 21, 2021Frontend
Design & UX — An Alternative Voice UI To Voice Assistants — Smashing Magazine

An Alternative Voice UI To Voice Assistants — Smashing Magazine

Voice assistants are currently the most popular use case for voice user interfaces. However, because voice assistants give feedback by talking to the user, assistants can only solve simple user tasks such as setting an alarm or playing music. In order for voice user interfaces to really break through, feedback to the user must be visual instead of auditive.

OPOttomatias PeuraOttomatias Peura·June 18, 2021Design & UX
Frontend — Client-Side Routing In Next.js — Smashing Magazine

Client-Side Routing In Next.js — Smashing Magazine

Next.js has a file-based routing system in which each page automatically becomes a route based on its file name. Each page is a default exported React component from the pages directory that can be used to define the most common route patterns. This article will guide you through almost everything you need to know about Routing in Next.js and point you in the direction of related topics and concep

AAAdebiyi AdedotunAdebiyi Adedotun·June 18, 2021Frontend
Engineering — PKCE: What and Why?

PKCE: What and Why?

Come learn about the PKCE OAuth flow! How it works, why it’s valuable, and how to use it to authorize your Dropbox app.

TKTaylor Krusen·June 17, 2021Engineering
Engineering — Your Image Is Probably Not Decorative — Smashing Magazine

Your Image Is Probably Not Decorative — Smashing Magazine

Image placement on the modern web is highly intentional, helping to communicate the overall purpose of a page or view. This means that nearly every image you declare needs to have an alternate description. Nulling an image indicates that it is for decorative purposes only. In this context, decorative means that the image does not visually communicate information that is important to understanding

EBEric BaileyEric Bailey·June 17, 2021Engineering
Distributed — Stripe Sessions 2021

Stripe Sessions 2021

Maximize conversion, scale globally, and introduce new revenue streams with new products from Stripe.

WGWill GaybrickWill Gaybrick·June 17, 2021Distributed
Networking — Building Waiting Room on Workers and Durable Objects

Building Waiting Room on Workers and Durable Objects

Our product is specifically built for customers who experience high volumes of traffic, so we needed to run code at the edge in a highly scalable manner. Cloudflare has a great culture of building upon its own products, so we naturally thought of Workers.

FGFabienne, GeorgeFabienne, George·June 16, 2021Networking
Frontend — A Complete Guide To Accessibility Tooling — Smashing Magazine

A Complete Guide To Accessibility Tooling — Smashing Magazine

In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered HTML Emails and SVG Generators. This time we look into different kinds of tools to help you streamline your accessibility testing process. Don’t miss the next one.

NCNic ChanNic Chan·June 16, 2021Frontend
SRE & Ops — Network hose: Managing uncertain network demand with model simplicity

Network hose: Managing uncertain network demand with model simplicity

Our production backbone network connects our data centers and delivers content to our users. The network supports a vast number of different services, distributed across a multitude of data centers. Traffic patterns shift over time from one data center to another due to the introduction of new services, service architecture changes, changes in user behavior, […]

MEMeta Engineering·June 15, 2021SRE & Ops
Architecture — Spinning Up Multiple WordPress Sites Locally With DevKinsta — Smashing Magazine

Spinning Up Multiple WordPress Sites Locally With DevKinsta — Smashing Magazine

When developing themes and plugins for WordPress, we need to test them in different environments. How can we create multiple testing sites on our computer, quickly and easily, without having to become a sysadmin? If our themes and plugins contain custom blocks, testing them for all different versions is imperative. At the very minimum, we need to worry about two versions of Gutenberg: the one ship

LLeonardolosovizLeonardolosoviz·June 15, 2021Architecture
Design & UX — Web Design Done Well: Making Use Of Audio — Smashing Magazine

Web Design Done Well: Making Use Of Audio — Smashing Magazine

Design often revolves around visuals, but the other senses deserve love too. In this article, we tune in to audio features that are making sites sing. Most of us have had the misfortune of crossing bad examples (auto-playing videos being a particularly egregious example) but audio can give web experiences a whole new dimension when applied well. What follows are some astounding sounds from the Wor

FOFrederick O BrienFrederick O Brien·June 11, 2021Design & UX
Engineering — Equal Columns With Flexbox: It’s More Complicated Than You Might Think

Equal Columns With Flexbox: It’s More Complicated Than You Might Think

As awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top of that, flex-shrink is also doing some work allowing the items to be smaller, but only if needed. Let’s break those two down and see how

KPKevin PowellKevin Powell·June 10, 2021Engineering
Engineering — Blacktocats turn five

Blacktocats turn five

What began as a small group effort in 2015 has now turned into a global initiative here at GitHub to amplify Black voices and talent in the tech community.

BDBrian DouglasBrian Douglas·June 10, 2021Engineering
Engineering — What’s new from GitHub Changelog? May 2021 Recap

What’s new from GitHub Changelog? May 2021 Recap

In May, GitHub shipped a total of 20 new features. We love what we do, but we know it’s a lot to keep up with. So we’re trying something new on the GitHub Blog—a monthly recap of everything that shipped to Changelog in the past month. Check out some of the updates you might have missed.

SMSidi MerzoukSidi Merzouk·June 10, 2021Engineering
Performance — Useful Front-End Boilerplates And Starter Kits — Smashing Magazine

Useful Front-End Boilerplates And Starter Kits — Smashing Magazine

We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately. We’ve also just recently covered CSS auditing tools, CSS generators, accessible front-end components and VS code extensions — you might find them useful, too. This collection is by no means complete, but rather a selection of things t

CMCosima MielkeCosima Mielke·June 10, 2021Performance
Engineering — Celebrating 7 Years of Project Galileo

Celebrating 7 Years of Project Galileo

Every June, we celebrate the anniversary of Project Galileo. This year, we are proud to celebrate seven years of protecting the most vulnerable groups on the Internet from cyberattacks.

CCloudflare·June 9, 2021Engineering
Frontend — A Cornucopia of Container Queries

A Cornucopia of Container Queries

I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries

GGGeoff GrahamGeoff Graham·June 9, 2021Frontend
Networking — Sponsored Post: Pinecone, Kinsta, Bridgecrew, IP2Location, StackHawk, InterviewCamp.io, Educative, Stream, Fauna, Triplebyte - High Scalability -

Sponsored Post: Pinecone, Kinsta, Bridgecrew, IP2Location, StackHawk, InterviewCamp.io, Educative, Stream, Fauna, Triplebyte - High Scalability -

Who's Hiring? * DevOps Engineer: At Kinsta, we set out to create the best managed hosting platform in the world. If you are an experienced DevOps Engineer who is constantly looking for ways to innovate and improve, we might just be the place for you! As Kinsta’s DevOps Engineer, you will be instrumental in making sure that our infrastructure is always on the bleeding edge of technology, remaining

HSHigh Scalability·June 8, 2021Networking
Distributed — Linux Kernel vs. Memory Fragmentation (Part I) - High Scalability -

Linux Kernel vs. Memory Fragmentation (Part I) - High Scalability -

(External) memory fragmentation is a long-standing Linux kernel programming issue. As the system runs, it assigns various tasks to memory pages. Over time, memory gets fragmented, and eventually, a busy system that is up for a long time may have only a few contiguous physical pages. Because the Linux kernel supports virtual memory management, physical memory fragmentation is often not an issue. Wi

NXNan Xiang·June 8, 2021Distributed
Performance — From AVIF to WebP: A New Smashing Book By Addy Osmani — Smashing Magazine

From AVIF to WebP: A New Smashing Book By Addy Osmani — Smashing Magazine

It’s here! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our deep-dive guide to understand how to deliver high-quality images on the web fast. 528 pages. From formats and compression to delivery and maintenance. Get the book right away!

VFVitaly FriedmanVitaly Friedman·June 8, 2021Performance
Frontend — VS Code Extensions for HTML

VS Code Extensions for HTML

Let's look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better. You may not

CCChris Coyier·June 7, 2021Frontend
Frontend — How To Build A Geocoding App In Vue.js Using Mapbox — Smashing Magazine

How To Build A Geocoding App In Vue.js Using Mapbox — Smashing Magazine

In this guide, Prince Chukwudire will show you how to build a simple geocoding app from scratch, using Vue.js and Mapbox. He’ll cover the process from building the front-end scaffolding up to building a geocoder to handle forward geocoding and reverse geocoding. To get the most out of this guide, you’ll need a basic understanding of JavaScript and Vue.js and how to make API calls.

PCPrince ChukwudirePrince Chukwudire·June 7, 2021Frontend