Home/2020
Archive

Year 2020

2,167 articles published in 2020.

Frontend — Quick LocalStorage Usage in Vue

Quick LocalStorage Usage in Vue

localStorage can be an incredibly useful tool in creating experiences for applications, extensions, documentation, and a variety of use cases. I've personally

SDSarah DrasnerSarah Drasner·November 5, 2020Frontend
Engineering — Data Visualization With ApexCharts — Smashing Magazine

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.

NENefe Emadamerho AtoriNefe Emadamerho Atori·November 5, 2020Engineering
Design & UX — Internationalization And Localization For Static Sites — Smashing Magazine

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

SRSam RichardSam Richard·November 4, 2020Design & UX
Engineering — What Can Web Designers Do With Their Unused Designs? — Smashing Magazine

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.

SSSuzanne ScaccaSuzanne Scacca·November 3, 2020Engineering
Engineering — Commit your vote on election day!

Commit your vote on election day!

Closing that priority issue you’re working on can wait—put down your keyboard and vote! Millions of you already have, and your vote in national and local elections may just impact…

MLMike LinksvayerMike Linksvayer·November 2, 2020Engineering
Security — ShiftLeft on Refactoring a Live SaaS Environment - High Scalability -

ShiftLeft on Refactoring a Live SaaS Environment - High Scalability -

This is guest a post by Preetam Jinka, Senior Infrastructure Engineer at ShiftLeft. Originally published here. ShiftLeft NextGen Static Analysis (NG SAST) is a software-as-a-service static analysis solution that allows developers to scan every pull request for security issues. Earlier this year we released Secrets, Security Insights, and a v4 API. Secrets and Security Insights are two new types of

HSHigh Scalability·November 2, 2020Security
Design & UX — Chasing the Pixel-Perfect Dream

Chasing the Pixel-Perfect Dream

Is it possible to create an implementation of a design that matches to-the-pixel? Well, not really, but that shouldn't discourage us! In this article, I'll show how I became designers' best friend by leveraging a series of tricks to get my implementation looking near-pixel-perfect.

JWJosh W. Comeau·November 2, 2020Design & UX
Frontend — Native CSS Masonry Layout In CSS Grid — Smashing Magazine

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

RARachel AndrewRachel Andrew·November 2, 2020Frontend
Engineering — GitHub Game Off 2020 theme announcement

GitHub Game Off 2020 theme announcement

The theme for this year’s Game Off is MOONSHOT. moonshot – noun an extremely ambitious and innovative project the act of launching a spacecraft to the moon a hit or…

LRLee ReillyLee Reilly·November 1, 2020Engineering
Engineering — Spotify’s New Experimentation Platform (Part 2)

Spotify’s New Experimentation Platform (Part 2)

So you’ve read of our two-part series about the new Experimentation Platform we’ve built at Spotify, and now know why we decided to invest in a new platform. In Part II, you’ll get a more detailed look at how we assigned users to experiments, how we analyze results and ensure test integrity.

JRJohan Rydberg·November 1, 2020Engineering
Performance — It’s All Just Wiggly Air: Building Infrastructure to Support Audio Research

It’s All Just Wiggly Air: Building Infrastructure to Support Audio Research

TL;DR — our framework for building smarter data pipelines for audio and other media processing. Based on Python and Apache Beam, helps our teams process Spotify’s massive catalog of music and podcasts, faster and more efficiently. We think Klio’s — and its ability to let anyone leverage modern cloud infrastructure and tooling — has the potential to unlock new possibilities in media and ML research

DRDavid Riordan and Lynn Root·November 1, 2020Performance
Engineering — Be Kind, Be Curious (November 2020 Wallpapers Edition) — Smashing Magazine

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

CMCosima MielkeCosima Mielke·October 31, 2020Engineering
Networking — Unwrap the SERVFAIL

Unwrap the SERVFAIL

We recently released a new version of Cloudflare Resolver, which adds a piece of information called “Extended DNS Errors” (EDE) along with the response code under certain circumstances. This will be helpful in tracing DNS resolution errors and figure out what went wrong behind the scenes.

AAnbangAnbang·October 30, 2020Networking
Engineering — compute cuter

compute cuter

Get that desk more cuter, fam. Amy (@sailorhg) has this perfectly cute minisite with assorted desktop backgrounds, fonts, editor themes, keyboard stuff, and

CCChris Coyier·October 30, 2020Engineering
Engineering — Little Things on My Personal Site

Little Things on My Personal Site

I updated my personal website the other day. Always a fun project since it's one of the few where it's 100% just me. It's my own personal playground with no

CCChris Coyier·October 30, 2020Engineering
Engineering — The Principles Of Visual Communication — Smashing Magazine

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

ELElizabeth LinElizabeth Lin·October 30, 2020Engineering
Engineering — Introducing Bot Analytics

Introducing Bot Analytics

Nearly 40% of Internet traffic is automated. Today, Cloudflare is taking its Bot Management product to new heights with the release of Bot Analytics.

BBensolBensol·October 29, 2020Engineering
SRE & Ops — Getting started with DevOps automation

Getting started with DevOps automation

This is the second post in our series on DevOps fundamentals. For a guide to what DevOps is and answers to common DevOps myths check out part one. What role…

JMJared MurrellJared Murrell·October 29, 2020SRE & Ops
Databases — How to Introduce Composite Primary Keys in Rails - Shopify

How to Introduce Composite Primary Keys in Rails - Shopify

One line of code can 5x your Rails application performance. What if you could make a small change to your database design that would unlock massively more efficient data access? At Shopify, we dusted off some old database principles and did exactly that with the primary Rails application.

SEShopify Engineering·October 29, 2020Databases
Frontend — How To Build A GraphQL Server Using Next.js API Routes — Smashing Magazine

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

INIbrahima NdawIbrahima Ndaw·October 29, 2020Frontend
Engineering — Building with Dropbox Webinar

Building with Dropbox Webinar

Join our webinar to learn about Dropbox developer tools, meet our Developer Evangelists, and get started building with the Dropbox API.

MRMarcel Ribas·October 28, 2020Engineering
Engineering — How We Run Online Workshops — Smashing Magazine

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.

VFVitaly FriedmanVitaly Friedman·October 28, 2020Engineering
Systems — Diving into /proc/[pid]/mem

Diving into /proc/[pid]/mem

A few months ago, after reading about Cloudflare doubling its intern class, I quickly dusted off my CV and applied for an internship. Long story short: now, a couple of months later, I found myself staring at Linux kernel code and adding a pretty cool feature to gVisor.

LMLennart, Marek MajkowskiLennart, Marek Majkowski·October 27, 2020Systems
Security — Exploiting a textbook use-after-free security vulnerability in Chrome

Exploiting a textbook use-after-free security vulnerability in Chrome

In this post I’ll give details about how to exploit CVE-2020-6449, a use-after-free (UAF) in the WebAudio module of Chrome that I discovered in March 2020. I’ll give an outline of the general strategy to exploit this type of UAF to achieve a sandboxed RCE in Chrome by a single click (and perhaps a 2 minute wait) on a malicious website.

MYMan Yue MoMan Yue Mo·October 27, 2020Security
Security — Authentication In Vue.js — Smashing Magazine

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

PNPrecious NdubuezePrecious Ndubueze·October 27, 2020Security
Engineering — Road to gRPC

Road to gRPC

Cloudflare launched support for gRPC during our 2020 Birthday Week. In this post, we’ll do a deep-dive into the technical details of how we implemented support.

JYJunho, YuchenJunho, Yuchen·October 26, 2020Engineering
Engineering — WordPress and Jamstack

WordPress and Jamstack

I recently moderated a panel at Netlify's virtual Jamstack Conf that included Netlify CEO Matt Biilman and Automattic founder Matt Mullenweg. The whole thing

CCChris Coyier·October 26, 2020Engineering
Frontend — Introducing Framer Motion — Smashing Magazine

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.

NENefe Emadamerho AtoriNefe Emadamerho Atori·October 26, 2020Frontend