No-Class CSS Frameworks
I linked up Water.css not long ago as an interesting sort of CSS framework. No classes. No <h2 class="is-title">. You just use semantic HTML and get
CSS Variables for React Devs
CSS variables are *really* cool, and they're incredibly powerful when it comes to React! This tutorial shows how we can use them with React to create dynamic themes. We'll see how to get the most out of CSS-in-JS tools like styled-components, and how our mental frame around media queries has been wrong all along.
Stop using client-side route redirects
Why you should stop using client-side route redirects (like the `from` prop on React Router's Redirect component) and what you should do instead.
Inspired Design Decisions With Herb Lubalin: Typography Can Be As Exciting As Illustration And Photography — Smashing Magazine
In this eighth issue of Inspired Design Decisions, Andy Clarke will explain how learning about American graphic designer and typographer Herb Lubalin has transformed his approach to typography on the web. How can we combine elements to develop powerful headers and calls to action? How do we use pre-formatted HTML text, and the text element in SVG for precise control over type? How can we optimise
Remote work, regional lockdowns and migration of Internet usage
As a large portion of Internet access shifted from office-focused areas, like city centers and business parks, towards more residential areas like suburbs and outlying towns, we wanted to find out just precisely how broad this geographical traffic migration was.
Bored? How about trying a Linux speed run?
Rolling With The Punches: Shifting Attack Tactics & Dropping Packets Faster & Cheaper At The Edge
Over the past 6 months, volumetric DDoS attacks decreased by 82%. However volumetric attacks are not gone yet, still peaking as high as 418 Gbps. In this post, we cover the changing attack landscape and how Cloudflare adapts and evolves to keep the internet safe.
File locking using the Dropbox API
Prevent unwanted edits to your files by using the new file locking feature in the Dropbox API.
Remote work: A series of best practices for a remote workplace
GitHub shares best practices for making remote work part of your company culture.
Getting Started With The React Hooks API — Smashing Magazine
In this tutorial, you are going to learn and understand what React hooks are, the basic React Hooks that are available and also examples of how to write them for your React applications. In the process, you will also get to know about some additional hooks that were shipped with React 16.8 and also how to write your own custom React Hooks.
Internship Experience: Cryptography Engineer
A member of the research team recounts his experience as an intern.
Create Diagonal Layouts Like it's 2020
Nils Binder covers the ways:
Building on our open platform: Design in Figma, prototype with Framer
Learn more about our new integration with Framer.
From 48k lines of code to 10—the story of GitHub’s JavaScript SDK
Learn about the legacy, architecture, and methods used to reduce 48k lines of code to 10 as we take a deep dive into GitHub’s Javascript SDK.
Featured actions from the GitHub Actions Hackathon
We want to thank everyone who participated in the GitHub Actions Hackathon. We had hundreds of submissions, so here’s our top picks.
GitHub Protips: Tips, tricks, hacks, and secrets from Lee Reilly
Check out Lee Reilly’s top ten tips and tricks to help you hack your GitHub experience. You won’t believe tip number eight!
Free Google Book: Building Secure and Reliable Systems - High Scalability -
Google added another book into their excellent SRE series: Building Secure and Reliable Systems. It's free to download, so don't be shy. It's not short: 557 pages and 21 chapters! So what's it about? In short it's about "reliability through the lens of security." In long, Ana Oprea, one of the authors, gave a good overview. anaoprea: There are multiple questions about what this book is about, who
Baking Structured Data Into The Design Process — Smashing Magazine
All search engines share the same purpose: to organize the web’s content and deliver the most relevant, useful results possible to search queries. How they achieve this has changed enormously since the days of Lycos and Ask Jeeves. Google alone uses more than 200 ranking factors, and those are just the ones we know about. Retrofitting search engine optimization only gets you so far. As metadata ge
Moving from reCAPTCHA to hCaptcha
We recently migrated the CAPTCHA provider we use from Google's reCAPTCHA to a service provided by the independent hCaptcha. Here's a walk through of the rationale in more detail.
How To Use 1.1.1.1 w/ WARP App And Cloudflare Gateway To Protect Your Phone From Security Threats
Starting today, you can get even more out of your 1.1.1.1 app. By adding Cloudflare Gateway’s secure DNS filtering to your 1.1.1.1 app, you can add a layer of security and block malicious domains flagged as phishing, command and control, or spam.
Keeping that tight-knit feeling, at a distance
A round-up of tips and activities to keep your team close.
Learn about open source in the social sector from our latest report
Learn more about open source’s impact in the social sector from the Open Source for Good research paper.
One Team at Uber is Moving from Microservices to Macroservices - High Scalability -
There may be an undiscovered tribe deep in some jungle somewhere that hasn’t made up their mind on microservices, but I doubt it. People love microservices or love to hate microservices. There’s not much in between. So it means something when even a team at a company like Uber announces a change away from microservices to something else. What? Macroservices. But we’ll get to that. Think what you w
How To Set Up An Express API Backend Project With PostgreSQL — Smashing Magazine
In this article, Chidi Orji will create a set of API endpoints using [Express](https://expressjs.com/) from scratch in ES6 syntax, and cover some development best practices. Find out how all the pieces work together as you create a small project using Continuous Integration and Test-Driven Development before deploying to Heroku.
Simpler Pricing
Project Crossbow: Lessons from Refactoring a Large-Scale Internal Tool
Crossbow is a tool that is now allowing Cloudflare’s Technical Support Engineers to perform diagnostic activities from running commands (like traceroutes, cURL requests and DNS queries) to debugging product features and performance features using bespoke tools.
CSS Findings From The New Facebook Design
Ahmad Shadeed digs around the new Facebook's front-end code.
How to Re-Create a Nifty Netflix Animation in CSS
The design for Netflix's browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll
Celebrating 15 years of Git: An interview with Git maintainer Junio Hamano
GitHub is built on Git, and as Git celebrates its 15th anniversary, our own Jeff King interviews Git maintainer Junio Hamano about Git’s impact over the years.
Styling Ordered Lists with CSS Counters
Styling an ordered list can be surprisingly tricky; there's no way to get at that bullet! In this tutorial, we'll see a handy trick using CSS counters that lets us style ordered lists without breaking proper semantics.
Building Arrive's Confetti in React Native with Reanimated - Shopify
Shopify is investing in React Native as our primary choice of mobile technology moving forward. As a part of this we’ve rewritten our package tracking app Arrive with React Native and launched it on Android—an app that previously only had an iOS version. One of the most cherished features by the users of the Arrive iOS app is the confetti that rains down on the screen when an order is delivered. T
Smashing Podcast Episode 13 With Laura Kalbag: What Is Online Privacy? — Smashing Magazine
In this episode of the Smashing Podcast we’re talking about online privacy. What should web developers be doing to make sure the privacy of our users is maintained? Drew McLellan talks to an expert on the subject, Laura Kalbag, to find out.
Conntrack tales - one thousand and one flows
We were wondering - can we just enable Linux "conntrack"? How does it actually work? I volunteered to help the team understand the dark corners of the Linux's "conntrack" stateful firewall subsystem.
A Grid of Logos in Squares
Let's build a literal grid of squares, and we'll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo
The State Reducer Pattern with React Hooks
A pattern for you to use in custom hooks to enhance the power and flexibility of your hooks.
A Day in the Life of a Backend Product Engineer at Slack
7am I’m definitely not a morning person, so when my alarm goes off, I can’t help but stay in bed a little while longer. I have two cats, Stella and Orion, who are especially cuddly in the mornings, so it’s hard to leave them and get out of bed. My cats are well known by…
Create Your Free Developer Blog Using Hugo And Firebase — Smashing Magazine
Writing is a crucial skill every software developer should cultivate. And writing on your own technical blog can have immense benefits to your career as a software developer and help you cultivate your skills and expertise. Creating and hosting a technical blog provides an opportunity to do just that. In this article, Zara Cooper will take a look at how to deploy a blog for free and with minimal e
CSS-Only Marquee Effect
You make sure the text is more than twice the width of the screen, then use negative translate animations to do the marquee movement.
Function forms
When I prefer to use function declarations instead of arrow functions
The Serverlist: Built with Workers, Single-Tenant Architecture, and more!
Check out our fourteenth edition of The Serverlist below. Get the latest scoop on the serverless space, get your hands dirty with new developer tutorials, engage in conversations with other serverless developers, and find upcoming meetups and conferences to attend.
Trailblazing a Development Environment for Workers
When I arrived at Cloudflare for an internship in the summer of 2018, I was taken on a tour, introduced to my mentor who took me out for coffee (shoutout to Preston), and given a quick whiteboard overview of how Cloudflare works.
Some Typography Links II
I just can't stop bookmarking great links related to typography. I'm afraid I'm going to have to subject you, yet again, to a bunch of them all grouped up. So
Getting JavaScript to Talk to CSS and Sass
JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large
Google's Technical Writing Guide
It's good!
Releasing The Ethical Design Handbook When We Needed It Most — Smashing Magazine
Early this month, [The Ethical Design Handbook](https://www.smashingmagazine.com/printed-books/ethical-design-handbook/) joined the Smashing Library of essential books for designers and developers. Changes around the world have meant changes in the book release, but readers love it so far! Ethical Design principles are timeless and we are seeing the results of that during an unprecedented time of
The Mistake that Caused 1.1.1.3 to Block LGBTQIA+ Sites Today
Today we made a mistake. The mistake caused a number of LGBTQIA+ sites to inadvertently be blocked by the new 1.1.1.1 for Families service. I wanted to walk through what happened, why, and what we've done to fix it.
Cloudflare Doubling Size of 2020 Summer Intern Class
Today we are announcing that we will double the size of Cloudflare’s summer 2020 internship class.
Accessibility Links
Austin Gil has kicked off the first in a five-part series about "HTML Forms Right" and to starts with semantics. It's talking to the "we build our front-ends
typespecimens.io
If you’re looking for a new typeface for that side project of yours then here’s a great website by John D. Jameson that collects a bunch of the latest type
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
Rethinking Code Comments
Justin Duke asks if treating code comments like footnotes could help us understand the code in a file better. In his mockup, all the comments are hidden by
GitHub Protips: Tips, tricks, hacks, and secrets from Vitor Monteiro
There are lots of hidden secrets, keyboard shortcuts, hacks, and more that can make you and your team’s GitHub experience more productive, personal, and entertaining. Here are some Protips that Vitor Monteiro, GitHub Strategic Architect, has picked up along the way that might be useful to you.
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.
Announcing the Beta for WARP for macOS and Windows
While WARP started as an option within the 1.1.1.1 app, it's really a technology that can benefit any device connected to the Internet. In fact, one of the most common requests we've gotten over the last year is support for WARP for macOS and Windows. Today we're announcing exactly that.
Introducing 1.1.1.1 for Families
Introducing 1.1.1.1 for Families — the easiest way to add a layer of protection to your home network and protect it from malware and adult content.
Cloudflare now supports security keys with Web Authentication (WebAuthn)!
We’re excited to announce that Cloudflare now supports security keys as a two factor authentication (2FA) method for all users.
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
How Students Who Design set up Figma in their online classroom
Learn how SWD onboards students, organizes files, teaches classes, and provides project feedback with Figma for their online courses.
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.
How We Use Backstage at Spotify
is Spotify’s homegrown developer portal. We’ve been using it internally for years, but only recently released the open source version. You can read more about what Backstage does, and our plans for its future, in our previous post, “”