Paul Scanlon's Site

Home
Hire Me
About
3Articles
1Posts
2Ghosts
Dashboard
Tags
RSS Feed
Demos
Open-source
Streams

Twitter/X
GitHub
LinkedIn

JavaScript x85

Tagged with JavaScript

Here you'll find 85 pieces of content I've written about JavaScript. They've either been published here on my site, or by external publications.

NEW
Tuesday, June 25, 2024 How to Use Google Application .json Credentials in Environment Variables
If you've ever tried to use one of Google's APIs you'll know at some point you're prompted to download the credentials a...
- Node.js
- JavaScript
NEW
The New Stack
• Monday, June 17, 2024 How To Use Google Sheets as a Database With React via Next.js
In this tutorial I’ll be explaining how to use Google Sheets as a database to store the results of a user poll. I’ve use...
- Next.js
- React
- JavaScript
NEW
The New Stack
• Wednesday, May 29, 2024 Why We Need a Standard JavaScript ORM for SQL Databases
Is Drizzle ORM the open source, SQL-friendly tool that JavaScript developers have been looking for to help with type saf...
- JavaScript
- TypeScript
- PostgreSQL
- SQL
- DrizzleORM
NEW
The New Stack
• Wednesday, May 22, 2024 Drizzle ORM Is SQL in a JavaScript Hat — and Wears It Well
Drizzle ORM converts types from SQL to TypeScript, and can help JS devs work with relational databases in TypeScript env...
- JavaScript
- TypeScript
- PostgreSQL
- SQL
- DrizzleORM
NEW
The New Stack
• Thursday, May 16, 2024 Outer Excuses: Why JavaScript Developers Should Learn SQL
SQL is the language of databases and if you’re a JavaScript developer using PostgreSQL, it’s beneficial to have a basic ...
- JavaScript
- PostgreSQL
- SQL
- AI
NEW
Netlify Developers
• Monday, May 13, 2024 Getting Started with React, Vite and Clerk Auth on Netlify
Very many applications and interactive tools on the web require some sort of user authentication and authorization. Hist...
- JavaScript
- React
- Clerk
NEW
Netlify Developers
• Friday, May 10, 2024 How to use Sanity Portable Text with Astro
Providing content editors with the ability to apply rich text formatting, be it in long-form content with styled heading...
- JavaScript
- Astro
- Sanity
NEW
The New Stack
• Wednesday, April 24, 2024 Global state management in React with Jotai
Jotai is a global state management solution for React, explains Paul Scanlon in this tutorial about Waku developer Daish...
- React
- JavaScript
- Waku
NEW
The New Stack
• Thursday, April 18, 2024 Did Signals Just Land in React?
"Signals" are used to manage client-side state, and recent developments suggest they could be useful in React. Paul Scan...
- React
- JavaScript
NEW
Netlify Developers
• Tuesday, April 9, 2024 How to use Sanity CMS with Astro
The ability to select both the framework and the content management system that each have the best fit with the requirem...
- JavaScript
- Astro
- Sanity
NEW
The New Stack
• Tuesday, April 9, 2024 React Server Components in a Nutshell
Paul Scanlon uses Waku to show how RSCs give React developers access to asynchronous server-side requests and data at th...
- React
- JavaScript
- Waku
NEW
Netlify Developers
• Wednesday, March 13, 2024 Adding resumability to Astro with Qwik
Astro avoids shipping any JavaScript to the client by default. However, there are occasions when client-side JavaScript ...
- JavaScript
- Astro
- Qwik
NEW
The New Stack
• Saturday, March 9, 2024 How to Build Embed Components with Astro, Qwik and StackBlitz
Paul Scanlon shows how to use the StackBlitz JavaScript SDK, in this case to embed StackBlitz projects in an Astro websi...
- JavaScript
- Astro
- Qwik
- StackBlitz
NEW
The New Stack
• Thursday, February 29, 2024 How to Build Site Search with Astro, Qwik and Fuse.js
How to build a site search using Astro’s content collections, static endpoints and Qwik’s Astro integration with Fuse.js...
- JavaScript
- Astro
- Qwik
- Fuse.js
NEW
Thursday, February 22, 2024 How to Build a Survey With KwesForms and Astro
In this post I'll explain how I built a survey form using KwesForms and Astro, complete with some fancy data viz to me h...
- Astro
- KwesForms
- JavaScript
- SVG
NEW
The New Stack
• Saturday, February 17, 2024 JavaScript on Demand: How Qwik Differs From React Hydration
Paul Scanlon explains resumability, Qwik’s approach to solving the beastly client-side JavaScript problem, and how it di...
- JavaScript
- React
- Qwik
NEW
Contentful
• Wednesday, February 7, 2024 Simple data visualization using Astro and Contentful
In this post I’ll show you how I created a time series chart to display tag usage from blog posts published on my site p...
- Astro
- JavaScript
- Contentful
NEW
Thursday, February 1, 2024 How to use Qwik's useVisibleTask$
In this post I'll be explaining how, and why I used Qwik's useVisibleTask$. I felt this needed explaining because, as yo...
- Qwik
- Astro
- JavaScript
NEW
The New Stack
• Wednesday, January 24, 2024 Take a Qwik Break from React with Astro
Paul Scanlon compares React to Qwik using several examples (code included). He concludes that Qwik is worth exploring as...
- Astro
- JavaScript
- React
- Qwik
NEW
SitePoint
• Thursday, January 18, 2024 Brighten Up Your Astro Site with KwesForms and Rive
In this article, I’ll show you how to add KwesForms to your Astro site and then bring the form to life using custom even...
- Astro
- Rive
- KwesForms
- JavaScript
NEW
The New Stack
• Friday, December 15, 2023 Recreating Shopify’s BFCM Globe Using react-globe.gl
Developer Paul Scanlon shows how to recreate Shopify's 3D Thanksgiving globe, using a React component for globe data vis...
- JavaScript
- React
- three.js
NEW
The New Stack
• Thursday, November 23, 2023 How Qwik’s Astro Integration Beats Both React and Vanilla JS
Paul Scanlon tests Qwik with Astro, and finds it's the best of both worlds — lighter than React and less verbose than Va...
- Astro
- JavaScript
- React
- Qwik
NEW
Monday, October 2, 2023 How to Create an SVG Radar Chart using Astro and Tailwind
If you're familiar with Astro you'll likely know that a lot of effort has been made to ensure you ship less JavaScript t...
- Astro
- JavaScript
- SVG
- Tailwind
NEW
Wednesday, September 27, 2023 How to Create Excerpts With Astro
In this post I'll explain how I've created an excerpt from Markdown content. I've used this approach on my site, I'm not...
- Astro
- JavaScript
- Markdown
NEW
The New Stack
• Sunday, March 19, 2023 The Distance from Data to You in Edge Computing
How does data transfer work between the browser, the server, and the database? You may be surprised at the distances tha...
- Next.js
- Serverless Functions
- SSR
- React
- JavaScript
- AWS Lambda
- Serverless
- PostgreSQL
NEW
Smashing Magazine
• Tuesday, March 7, 2023 How To Create Dynamic Donut Charts With TailwindCSS And React
In this article, Paul Scanlon shares a super lightweight approach to creating a Donut chart using conic-gradient(). Ther...
- HTML
- JavaScript
- React
- Tailwind
- CSS
- SVG
NEW
Cockroach Labs
• Friday, February 17, 2023 Converting Cloud Provider Regions Into Country Flags
Learn how Paul created an Open-source JavaScript utility package to help convert Cloud Provider Region codes, into real ...
- JavaScript
- CockroachDB
NEW
Tuesday, February 7, 2023 Cloud Regions Country Flags
Project Overview In February 2023 I released cloud-regions-country-flags because I needed it! I was working on a demo ap...
- JavaScript
NEW
The New Stack
• Monday, October 17, 2022 How to Use Google Sheets as a Database with React and Serverless Functions
In this tutorial I'll be explaining how to use Google Sheets as a database, to store the results of a user poll. I've us...
- Gatsby
- Next.js
- Serverless Functions
- React
- JavaScript
- Tailwind
NEW
Monday, October 17, 2022 How to Create Image Slices Using Sharp
Hey there, ok, this is a failed experiment, but it's October, Halloween is on the way and my experiment into image slici...
- JavaScript
- Sharp
NEW
The New Stack
• Saturday, October 8, 2022 How to Build SVG Line Charts with React, SSR and Tailwind CSS
A tutorial on how to roll your own SVG Line Charts in React using Server-side rendering, with either Next.js or Gatsby. ...
- Gatsby
- Next.js
- Serverless Functions
- SSR
- React
- JavaScript
- SVG
- Tailwind
NEW
Tuesday, September 27, 2022 How to use Serverless Functions with SSR
In this post I'll explain how to abstract and reuse the same function logic across all sides of the Gatsby stack; Server...
- Gatsby
- Serverless Functions
- React
- JavaScript
- Tailwind
- Google Analytics
NEW
Smashing Magazine
• Tuesday, September 20, 2022 What's New In Gatsby 2022?
Gatsby has evolved quite dramatically in the last two years. In this article, Paul Scanlon explains what Gatsby can do t...
- Gatsby
- Serverless Functions
- SSR
- React
- JavaScript
- MDX
- Tailwind
NEW
Thursday, September 8, 2022 How to use TanStack Query (react-query) with Gatsby
In this post I'll be discussing how to use TanStack Query, or more specifically @tanstack/react-query to replace the oft...
- Gatsby
- Serverless Functions
- React
- JavaScript
- React Query
NEW
Wednesday, August 10, 2022 How to use Utterances with React
Ahoy! In this post I'll be explaining how I used the fantastic Utteranc.es 🔮 with React. On the below links you'll find...
- React
- JavaScript
NEW
Monday, August 8, 2022 Syntax highlighting with Gatsby, MDX, Tailwind and Prism React Renderer
In this post I'll explain how I use the excellent {" "} Prism React Renderer by {" "} Formiddable to add syntax highligh...
- Gatsby
- React
- JavaScript
- MDX
- Tailwind
- Prism
NEW
Friday, July 29, 2022 How to use Gatsby's Head API with MDX
Hi there! I'm excited, are you? Of course you are! In Gatsby 4.19.0 the team shipped the Gatsby Head API 🎉 But what doe...
- Gatsby
- React
- JavaScript
- MDX
NEW
Tuesday, July 26, 2022 How to use Gatsby's Script API with Google Analytics
In this post I'll be explaining how to add Google's "new" Google Analytics Property (GA4) to your Gatsby Site using the ...
- Gatsby
- React
- JavaScript
- Partytown
- Google Analytics
NEW
Wednesday, June 1, 2022 Rise of the Robots
Project Overview From April 2022 to June 2022 I designed and built Rise of the Robots. The motivation for this project, ...
- Gatsby
- React
- JavaScript
- Rive
- Tailwind
NEW
Gatsby
• Wednesday, March 23, 2022 How to Add Google Analytics gtag to Gatsby Using Partytown 🎉
On Wednesday Mar 2nd 2022 I watched Ersin Akinci's talk at GatsbyConf: Improve Your Lighthouse Score with Partytown and ...
- Gatsby
- React
- JavaScript
- Partytown
- Google Analytics
NEW
Wednesday, March 2, 2022 GatsbyConf 2022
Project Overview From December 2021 to Feb 2022 I built GatsbyConf 2022. This site was the main conference site and was ...
- Gatsby
- React
- JavaScript
- three.js
- react-three-fiber
- Motion One
- SVG
NEW
Sunday, January 2, 2022 Using a useLocalStorage hook and rehydration
Recently I ran into an issue using the useLocalStorage hook from useHooks.com -- which is brills by the way! The Problem...
- JavaScript
- React
NEW
Gatsby
• Friday, December 17, 2021 Fetch Data from the Unsplash API and render using DSG
Learn how to use Gatsby's latest page rendering method DSG (Deferred Static Generation) to defer the creation of pages a...
- Gatsby
- React
- DSG
- JavaScript
- Tailwind
NEW
Gatsby
• Thursday, December 9, 2021 Fetch data from the New York Times API and render using SSG
As I'm sure you know, Gatsby is absolutely brills for statically generating web pages using any type of data from any ki...
- Gatsby
- React
- SSG
- JavaScript
- Tailwind
NEW
Gatsby
• Sunday, December 5, 2021 Fetch data from the US National Weather Service API and render using SSR
As you may have heard, the latest release of Gatsby, Gatsby 4 now supports SSR (Server Side Rendering) 🥳 This new addit...
- Gatsby
- React
- SSR
- JavaScript
- Tailwind
NEW
Gatsby
• Saturday, December 4, 2021 Become a Data Champion with Gatsby
Data is hard right? I think so too, and with Gatsby there's more than one way to boil that egg so in this series of blog...
- Gatsby
- React
- JavaScript
- Tailwind
NEW
Wednesday, August 18, 2021 Gatsby FuncJam 21
Groovy Analytics, It's gonna be something to do with Google Analytics 🕺 Visit Groovy Analytics Go Go Go Aug 18 2021 Her...
- Gatsby
- React
- TypeScript
- JavaScript
- Theme UI
- Serverless Functions
- Google Analytics
NEW
Wednesday, July 28, 2021 How to "fix" Gatsby slow local build times
Ahoy, as the title suggests in this post I'm going to explain one way to resolve the "slow local build time" issues I kn...
- React
- Gatsby
- JavaScript
NEW
Wednesday, July 7, 2021 500 Bottles
Project Overview In the summer of 2021 I created 500 Bottles. I designed the logo and the bottle, and worked with Market...
- Gatsby
- React
- JavaScript
- three.js
- react-three-fiber
- Shopify
NEW
Friday, July 2, 2021 Modify Gatsby's GraphQL data types using createSchemaCustomization
Hi friends, yesterday I published a little post about how to Add data to Gatsby's GraphQL layer using sourceNodes, this ...
- React
- Gatsby
- JavaScript
- GraphQL
NEW
Thursday, July 1, 2021 Add data to Gatsby's Data layer using sourceNodes
In this post i'm going to demonstrate how to source data from a NASA API and inject the response into Gatsby's GraphQL l...
- React
- Gatsby
- JavaScript
NEW
Friday, June 11, 2021 Paulie API
Project Overview In November 2020 I had an idea, I wanted to build an API so I could consume my Twitter Profile Data in ...
- Gatsby
- React
- JavaScript
- Serverless Functions
- Tailwind
NEW
Friday, June 11, 2021 Using Gatsby Serverless Functions as an abstracted API
They're here! Gatsby Serverless Functions are here! They're finally here! 💝 -- And I couldn't be more excited! A little...
- React
- Gatsby
- Serverless Functions
- JavaScript
- Gatsby Plugins
NEW
Friday, April 9, 2021 Gatsby Plugin Image: withArtDirection
Hello! If you're reading this you probably already know about Gatsby Plugin Image, but if not here's a recap: Announcing...
- React
- Gatsby
- JavaScript
- Gatsby Plugins
NEW
Monday, April 5, 2021 Sourcing local .json files with Gatsby
Hi all, I recently had a discussion with Rahul on Twitter regarding building a Gatsby blog using only locally sourced .j...
- Node.js
- Gatsby
- JavaScript
- JSON
NEW
Saturday, March 27, 2021 Create Accessible Data Visualization for your Gatsby Blog with Charts.css
Ahoy M'Hartys! ‍⚓ in this post i'm going to demonstrate how you can create Accessible Data visualization using Charts.cs...
- React
- Gatsby
- JavaScript
- MDX
- Charts CSS
NEW
Tuesday, March 16, 2021 Gatsby File System Route API: Multiple Source MDX
In this post I'm going to provide an example of how to use Gatsby's File System Route API to source MDX files from multi...
- React
- Gatsby
- JavaScript
- MDX
NEW
Monday, March 8, 2021 Understanding Theme UI
If you're new to Theme UI or have ben thinking about getting started with CSS-in-Js Theme UI is a great choice. The docs...
- JavaScript
- React
- Theme UI
NEW
Tuesday, February 9, 2021 Understanding Theme UI: 6 - The Hacks
In this post i'm going to explain some of my Theme UI "hacks"... to be honest they're not really hacks but you won't nec...
- JavaScript
- React
- Theme UI
NEW
Wednesday, February 3, 2021 Understanding Theme UI: 5 - Media Queries
In this post i'm going to explain how Theme UI's Responsive Values work and to get us started... You don't need to writ...
- JavaScript
- React
- Theme UI
NEW
Thursday, January 21, 2021 Understanding Theme UI: 4 - Scales
In this post i'm going to explain how Theme UI's Theme Scales work. If you're new to Theme UI i'd suggest having a read ...
- JavaScript
- React
- Theme UI
NEW
Tuesday, January 19, 2021 Understanding Theme UI: 3 - Components
In this post i'm going to explain how to use Theme UI's built in components. If you're new to Theme UI i'd suggest havin...
- JavaScript
- React
- Theme UI
NEW
Monday, January 18, 2021 Understanding Theme UI: 2 - Styled component
In my last post I attempted to explain Theme UI's Jsx Pragma, if you missed that, here's the link again Understanding T...
- JavaScript
- React
- Theme UI
NEW
Tuesday, January 12, 2021 Understanding Theme UI: 1 - Jsx Pragma
In this post I'm going to try and explain Theme UI's Jsx Pragma. I hope to create a series of these posts that might hel...
- JavaScript
- React
- Theme UI
NEW
Monday, January 11, 2021 Create an SVG Doughnut Chart from scratch for your Gatsby blog
Charting libraries are great don't get me wrong but sometimes... you just need a bloody doughnut! 🍩 This post is largel...
- JavaScript
- React
- SVG
- Gatsby
- CSS
NEW
Wednesday, January 6, 2021 Use Netlify Functions and the GitHub REST API to add Data Visualization to your Gatsby blog
After a recent Twitter conversation with my good chum Scott we decided we'd run a little experiment that will attempt to...
- JavaScript
- React
- Gatsby
- SVG
- Netlify Functions
- GitHub REST
NEW
Friday, January 1, 2021 Best Bits 2021 ...
Oh hey there! 👋 Here's a byte-size round up of things i've done so far this year. This post is pinned and will be updat...
- React
- Gatsby
- Serverless Functions
- three.js
- react-three-fiber
- JavaScript
- TypeScript
- Theme UI
- GitHub REST
NEW
Friday, November 27, 2020 Silly Site Challenge
BumHub The cheekiest way to explore GitHub 🍑 Visit BumHub Go Go Go Nov 23 2020 I'm at it again 🕺 If you followed alon...
- Gatsby
- React
- TypeScript
- JavaScript
- Theme UI
- SVG
- Netlify Functions
- GitHub REST
NEW
Tuesday, November 17, 2020 Use Netlify Functions and the Twitter API v2 as a CMS for your Gatsby blog
Apologies in advance for the rather long-winded blog title but as it suggests in this post i'm going to explain how you ...
- JavaScript
- React
- Gatsby
- Netlify Functions
- Twitter API v2
NEW
Tuesday, October 27, 2020 Storybook - An alternative approach
Hiya 👋, if you like Storybook you've come to the right place. I loooooooove Storybook!! It is in my opinion the ONLY wa...
- Storybook
- JavaScript
- React
NEW
Monday, August 24, 2020 Gatsby SEO Component
In this post i'm going to explain how to create an Seo component for use in a Gatsby application or site, I seem to alwa...
- Gatsby
- JavaScript
NEW
Wednesday, August 19, 2020 styled-components Responsive Array Syntax
In this post I'm going to discuss a new approach I've adopted when using [styled-components](https://Styled Components.c...
- React
- JavaScript
- styled-components
NEW
Thursday, August 13, 2020 styled-components Style Objects
styled-components optionally supports writing CSS as JavaScript objects instead of strings. This is particularly useful ...
- React
- JavaScript
- styled-components
NEW
Wednesday, August 5, 2020 Best Bits 2020 ...
Oh hey there! 👋 Here's a byte-size round up of projects I've Open-sourced, posts and articles I've written and contract...
- React
- Gatsby
- Gatsby Cloud
- JavaScript
- TypeScript
- Shopify
- styled-components
- Storybook
- Jest
- Enzyme
- Testing Library
NEW
Monday, August 3, 2020 React hooks and matter.js
Recently I was creating a Shopify demo application and became a little underwhelmed with the Checkout experience and so ...
- React
- JavaScript
- matter.js
NEW
Thursday, May 21, 2020 Roll Your Own Comments
After seeing the following Tweet by Fauna inviting users to take part in the Write With Fauna challenge i decided i'd su...
- React
- JavaScript
- Gatsby
- Fauna
- Apollo
- GraphQL
- Netlify
NEW
Friday, May 8, 2020 Gatsby CLI Recipes
I recently posted about two new Gatsby Recipes i was working on to help automate the sometimes quite tricky process of i...
- Gatsby
- Gatsby Recipes
- Storybook
- JavaScript
- TypeScript
NEW
Thursday, May 7, 2020 MDX Embed Intersection Observer
If you're not familiar with my plugin gatsby-mdx-embed have a read of this post ... or to summarize.. Gatsby MDX Embed ...
- React
- JavaScript
- Gatsby
- Gatsby Plugins
- MDX
NEW
Thursday, April 30, 2020 MDX Embed
Project Overview In April 2020 I released the first interation of MDX Embed. MDX Embed allows you to easily embed popul...
- React
- JavaScript
- MDX
NEW
Sunday, April 26, 2020 gatsby-recipe-storybook-js
If you haven't tried Gatsby Recipes yet you really should! You can read a bit more about them here which will give you a...
- Gatsby
- Gatsby Recipes
- Storybook
- JavaScript
NEW
Monday, April 20, 2020 MDX Embedded Images
In this post i'm going to show you how to use MDXRenderer to display embedded images in the body of your MDX by sourcing...
- React
- Gatsby
- JavaScript
- MDX
NEW
Friday, April 17, 2020 Gatsby or Theme UI Link
I know this has tripped me up on more than one occasion and if you're using Theme UI components in your Gatsby project i...
- React
- Gatsby
- JavaScript
- Theme UI
NEW
Friday, April 17, 2020 SVG Icon Systems
If you're doing this in your React project... just stop it! 🛑 // some-file.js import iconA from './icons/icon-a.svg'; i...
- React
- JavaScript
- SVG
NEW
Wednesday, April 15, 2020 Intersection Observer
Recently at work i was asked to create a scroll-jacking sticky nav and after trying out numerous open source projects re...
- React
- JavaScript
NEW
Saturday, February 15, 2020 gatsby-plugin-prop-shop
gatsby-plugin-prop-shop is my newest Gatsby Plugins and it's slightly different to my previous plugins. The reason for t...
- Gatsby
- Gatsby Plugins
- React
- JavaScript

Paul Scanlon

Independent Advocate (Freelance)

Click to Copy

Accessability Statement