Exploring the CSS Paint API: Image Fragmentation Effect

In my previous article, I created a fragmentation effect using CSS mask and custom properties. It was a neat effect but it has one drawback: it uses a lot of CSS code (generated using Sass). This time I am going to redo the same effect but rely on the new Paint API. This drastically reduces […]

SVG Gobbler

Great little project from Ross Moody: SVG Gobbler is a browser extension that finds the vector content on the page you’re viewing and gives you the option to download, optimize, copy, view the code, or export it as an image. When a site uses SVG as an <img>, you can right-click/save-as like any other image. […]

Three Buggy React Code Examples and How to Fix Them

There’s usually more than one way to code a thing in React. And while it’s possible to create the same thing different ways, there may be one or two approaches that technically work “better” than others. I actually run into plenty of examples where the code used to build a React component is technically “correct” […]

How to Build a Full-Stack Mobile Application With Flutter, Fauna, and GraphQL

Flutter is Google’s UI framework used to create flexible, expressive cross-platform mobile applications. It is one of the fastest-growing frameworks for mobile app development. On the other hand, Fauna is a transactional, developer-friendly serverless database that supports native GraphQL. Flutter + Fauna is a match made in Heaven. If you are looking to build and […]

Serverless Functions as Proxies

The first time cloud functions / serverless functions clicked for me was when I saw and tried Auth0’s (now defunct) Webtask. It was a little CodePen-like IDE but you didn’t really see anything aside from code and logs. The point was to write little bits of Node when you hit the functions URL (that’s literally […]

CSS Modules (The Native Ones)

They are actually called “CSS Module Scripts” and are a native browser feature, as opposed to the popular open-source project that essentially does scoped styles by creating unique class name identifiers in both HTML and CSS. Native CSS Modules are a part of ES Modules (a lot like JSON modules we recently covered): // Regular […]

A Shared ESLint Configuration

Like our markdown linters, all Mapbox documentation repositories use a shared ESLint configuration. Our configuration covers everything from enforcing React best practices to improving accessibility, including: eslint-config-mapbox is a shared ESLint config for Mapbox engineering teams which serves as the base for our configuration. eslint-plugin-react includes React specific linting rules. eslint-plugin-jsx-a11y checks accessibility rules on […]

Conjuring Generative Blobs With The CSS Paint API

The CSS Paint API (part of the magical Houdini family) opens the door to an exciting new world of design in CSS. Using the Paint API, we can create custom shapes, intricate patterns, and beautiful animations — all with a touch of randomness — in a way that is portable, fast, and responsive. We are […]

GitHub Explains the Open Graph Images

You know that feeling when you make your latest hack project public, and you’re ready to share it with the world? And when you go to Twitter to post a link to your repository, you just see a big picture of yourself? We wanted to make that a better experience. We recently set about creating […]

Pin It on Pinterest