Skip to content

Instantly share code, notes, and snippets.

View darnocer's full-sized avatar
Greetings Earthling

Darian Nocera darnocer

Greetings Earthling
View GitHub Profile
darnocer /
Created May 2, 2024 15:07
Dynamically Import Font Awesome Icons from a Database with React

Example to render Font Awesome Icons dynamically from a database with React

The following example is from a Mood Tracking app in which the user selects "Influences" on their mood which are buttons. Each button pulls the influence name from the "Influences" model in the db and the corresponding Font Awesome icon name that displays on the button.

Sample data from the Influences model:

name icon
Relationship heart
Work briefcase
Friends user-group
darnocer /
Created April 29, 2024 15:29
Generate random string for SECRET
openssl rand -hex 32
darnocer /
Created April 26, 2024 15:17
Pass content data as props in React
  1. Create a /data directory
  2. Create a file (eg. content.js) in /data with the data content structure of your app
const content = {
  home: {
    heading: "Welcome!",
  about: {
 heading: "About Us",
darnocer / nextauth.tsx
Created April 21, 2024 22:58
NextAuth for Google Provider
import NextAuth, { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export const authOptions: NextAuthOptions = {
providers: [
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
darnocer /
Created July 26, 2023 22:10
'builtin-modules' error


Module not found: Can't resolve 'builtin-modules'

Import trace for requested module:
darnocer /
Created April 20, 2023 17:44
Commit Changes to Github

Committing changes to Github

  1. Check status of changes
git status
  1. Stage files for commit

Specify files:

darnocer /
Created April 20, 2023 17:31
Open in VSCode Quick Action on Mac

Open in VSCode

Enable the option to right-click a folder and open it directly in VSCode on Mac.

  1. Open Automator
  2. File > New > Quick Action
  3. In the right-hand pane:
    • Worflow receives current files or folders in Finder
    • Optional:
      • Image > Choose... > Select Visual Studio Code from Applications
  • Color > Select Color
darnocer /
Created April 20, 2023 15:58
Upgrade Next.js

Next.js Versions

See what version of Next.js you're currently using:

npm list next

See the latest version of Next.js that is available:

npm view next version
darnocer /
Last active July 26, 2023 20:29
npm ERR gyp info error

Sharp package causing error

When installing dependencies with npm i, I was running into this unhelpful npm ERR! gyp info... error.

It was resolved by reinstalling the sharp package.

   "sharp": "^0.28.3", // version with error
   "sharp": "^0.32.4", // reinstalled version with no error
darnocer /
Last active September 16, 2023 17:32
Webflow Client-First Architecture Cheat Sheet
Legend 🟩 = Component

Page Structure