DEV Community: Alex Crocker

Gatsby.js Browser APIs Explained: wrapPageElement vs wrapRootElement

Alex Crocker — Thu, 25 Mar 2021 15:51:24 +0000

Gatsby.js is a powerful and flexible React framework that's focused on generating static pages and content from various external data sources at build time. It has a suite of powerful browser and node apis to manipulate data and create any page you might need.

Today I'm going to explain in-depth the difference between two fundamental browser apis that you should know, wrapPageElement and wrapRootElement.

Both of these browser apis are typically defined in the gatsby-browser.js file in the root of the project, but you can export both functions from gatsby-ssr.js as well in some cases without having to duplicate the code.

wrapPageElement is for layouts

First, the wrapPageElement api is ideal for base layouts that every page has. It's not necessary to use this function, but if you don't want to have to add your base layout component to every page of your site, then using this api is a good way to save some typing. Under the hood, this is what gatsby-plugin-layout is using, so now you can remove that unnecessary plugin.

wrapRootElement is for providers

Finally, the wrapRootElement api is designed for wrapping your core application with all of your various providers. In the example source code below, I am using the react-alert NPM package, which provides a convenient provider for us to demonstrate this api's usage. React Alert is a user-friendly library which provides hooks for customizing and displaying various alerts and notifications to the user.

To sum up, Gatsby has plenty of other browser apis, but wrapPageElement and wrapRootElement are the two you will probably be using most often in your sites. If you just remember that wrapPageElement is for layouts and wrapRootElement is for providers, you will be on your way to being a Gatsby expert in no time!

Source Code

import React from "react"

// Base Layout
import { Layout } from "./src/layouts/"

// react-alert
import { transitions, positions, Provider as AlertProvider } from "react-alert"
import AlertTemplate from "react-alert-template-basic"

const alertOptions = {
    position: positions.TOP_RIGHT,
    timeout: 5000,
    offset: "30px",
    transition: transitions.FADE,
}

export const wrapPageElement = ({ element }) => <Layout>{element}</Layout>

export const wrapRootElement = ({ element }) => (
    <AlertProvider template={AlertTemplate} {...alertOptions}>
        {element}
    </AlertProvider>
)

p5.js Animated Water Texture

Alex Crocker — Sun, 25 Oct 2020 01:51:36 +0000

I created a subtle animated water texture that's reminiscent of Minecraft water while experimenting and tweaking the code that was used in the following video on creating procedural terrain generation using Perlin noise.

https://www.youtube.com/watch?v=IKB1hWWedMk

How to find the best lists of expiring domains for dropcatching

Alex Crocker — Sun, 28 Jun 2020 19:31:50 +0000

Dropcatching is the process of bidding on expiring domain names in hopes that the dropcatching service can successfully snipe the domain on your behalf as soon as it drops.

All of the popular dropcatching services are competing and the one with the most resources allocated to any particular name will most likely win the snipe.

It definitely helps to shop around for the best prices and take advantage of many of the free, downloadable lists that each dropcatching service provides. Using tools like Dropfilter, you can easily filter these huge lists based on customizable criteria.

GoDaddy Auctions
https://auctions.godaddy.com/trptools.aspx

ftp://auctions@ftp.godaddy.com/ (blank password)

Namejet
http://www.namejet.com/Pages/Downloads.aspx

Dropcatch.com
https://www.dropcatch.com/DownloadCenter

SnapNames
https://snapnames.com/download.action

The Future of Social Media

Alex Crocker — Sun, 28 Jun 2020 19:27:29 +0000

I have been thinking on this topic for a long time and I believe the future of social media will not be centered around selling user data to advertisers, but selling “likes” as a currency.

The successor to Facebook will have to find a way to successfully convince people that tipping their favorite content creators is normal. Not an easy feat by any means, but the beginnings of this idea can be seen in YouTube monetization, Twitch bits and subscriptions, and Medium applause. Combining these elements is the key.

This new social network will allow all types of posts to be monetizeable, not just videos. Like Medium, likes will be basically limitless. A single user can like a post as many times as they want which roughly translates to more appreciation for the creator. Standard likes are free and common, but there are rarer tiers of likes that cost real money and have a higher appreciation value, which can factor in to trends and recommendation algorithms.

Take a look at this Twitter Moment for more on this topic.