darnocer

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

openssl rand -hex 32

darnocer

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

import NextAuth, { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],

darnocer

Images Not Displaying When Binding Data to :src with Vue

If you're using data binding to display an image with Vue.js, such as:

<img :src="'../assets/images/portfolio/' + item.image)" />

and the image is not displaying, it is because you need to require the path so that the string is recognized as a dependency:

darnocer

Not sure if my Kindle is just old, but I have the hardest time syncing my book notes & highlights to my Macbook so that I can export them. Below are the steps for my future reference.

Device: Kindle Paperwhite 7th Generation

Troubleshooting Syncing Issues

• Ensure both devices are connected to the same Wifi
• Ensure both devices are connected to the same Amazon account
• Ensure Whispersync* is enabled
• Try to 🔄 Sync from both devices

darnocer

Legend

🟩 = Component

---

Page Structure

Body

darnocer

Error

./node_modules/@esbuild-plugins/node-resolve/esm/index.js:37:0
Module not found: Can't resolve 'builtin-modules'

Import trace for requested module:
./node_modules/mdx-bundler/dist/index.js
./lib/mdx.js

darnocer

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

Guide to MailChimp Integration in Webflow

This guide covers in detail the implementation of a custom contact or sign up form on your Webflow website that subscribes users and adds data to your contact list in MailChimp, including the configuration in MailChimp. It goes over the options to actually implement the integration and the advantages and limitations of each option.

This guide is for beginners to MailChimp, but assumes proficiency in Webflow. This content is intended to be searchable for details that you need in case you get stuck :)

• Audience Segmentation & Form Fields
  • Overview

• Create a new Audience Field