Stephen Cohen's Blog

This should be an h3

Vestibulum leo turpis, dignissim quis ultrices sit amet, iaculis ac ligula. Pellentesque tristique, velit eget scelerisque scelerisque, est dolor ultrices arcu, quis ullamcorper justo arcu luctus mauris. Integer congue molestie nisi id posuere. Fusce pellentesque gravida tempus. Integer viverra tortor nec eros mollis quis convallis sem laoreet. Nulla id libero ac erat varius laoreet. Proin sed est est. Curabitur lacinia fermentum lorem, elementum malesuada ipsum malesuada ut. Donec suscipit elit id leo vehicula mattis non sed leo. Morbi varius eleifend varius. Nulla vestibulum, neque vitae aliquam eleifend, nisi tellus placerat nunc, quis suscipit elit turpis eu tortor. Etiam euismod convallis lectus quis venenatis. Phasellus laoreet magna in nibh cursus eu egestas nulla convallis. Aliquam vel ullamcorper risus. Fusce dictum, massa id consequat viverra, nulla ante tristique est, a faucibus nisi enim nec dui. Donec metus ligula, condimentum at porttitor eget, lobortis at quam.

This should be an h4

Aenean vel libero in magna ultricies congue in a odio. Donec faucibus rutrum ornare. Fusce dictum eleifend fermentum. Vestibulum vel nibh a metus porttitor rhoncus. Pellentesque id quam neque, eget molestie arcu. Integer in elit vel neque viverra ultricies in eget massa. Nam ut convallis est. Pellentesque eros eros, sodales non vehicula et, tincidunt ut odio. Cras suscipit ultrices metus sit amet molestie. Fusce enim leo, vehicula sed sodales quis, adipiscing at ipsum.

And this is an h5

Nunc tempor dignissim enim, sed tincidunt eros bibendum quis. Curabitur et dolor augue, id laoreet mi. Nulla cursus felis id dui vehicula vitae ornare lorem blandit. Cras eget dui nec odio volutpat pharetra. Fusce hendrerit justo justo, vel imperdiet enim. Vivamus elit risus, interdum ultrices accumsan eleifend, vestibulum vitae sapien. Integer bibendum ullamcorper tristique. Nulla quis odio lectus, quis eleifend augue. Integer a ligula mauris. Aenean et tempus tortor. Quisque at tortor mi. Vivamus accumsan feugiat est a blandit. Sed vitae enim ut dolor semper sodales. Duis tristique, ante et placerat elementum, nulla tellus pellentesque sapien, quis posuere velit mi eget nulla. Sed vestibulum nunc non est porttitor ut rutrum nibh semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

These are the circumstances that suffocate creativity and destroy value in an organization. That’s why I knew that if I was going to start a company, our first product would have to be the company itself.

But it takes more than good ideas to build and grow a business. It takes people to bring them into reality. Are those people collaborating and sharing their expertise, or are they in conflict and keeping it to themselves?

This is a blockquote. It contains two sentences.

But it takes more than good ideas to build and grow a business. It takes people to bring them into reality. Are those people collaborating and sharing their expertise, or are they in conflict and keeping it to themselves?

const LOCAL_STORAGE_KEY = "colorSchemeOverride";

//Determine the currently active color scheme:
//If the user has manually toggled it before, we'll have that stored in localstorage.
let colorSchemeOverride = localStorage.getItem(LOCAL_STORAGE_KEY);
//Otherwise, we're in dark mode if the `prefers-color-scheme: dark` media query tests true.
const prefersDarkQuery = window.matchMedia("(prefers-color-scheme: dark)");
let colorScheme = colorSchemeOverride || (prefersDarkQuery.matches ? "dark" : "light");

//Save the opposite color scheme for convenience
let oppositeColorScheme = colorScheme === "light" ? "dark" : "light";

//Get a handle on the toggle button
const toggleBtn = document.querySelector("#color-scheme-toggle");

function applyOverride() {
    if (colorSchemeOverride) {
        document.documentElement.setAttribute("data-force-color-scheme", colorSchemeOverride);
    }
    else {
        document.documentElement.removeAttribute("data-force-color-scheme");
    }
}
applyOverride();

function updateLabels() {
    //Set the aria-label and title appropriately
    const labelText = `Activate ${oppositeColorScheme} mode`;
    toggleBtn.setAttribute("aria-label", labelText);
    toggleBtn.setAttribute("title", labelText);
}
updateLabels();

toggleBtn.addEventListener("click", () => {
    //If the color scheme has been manually overridden, we should reset to following the browser preference.
    //However, the user may have changed that setting since toggling the override, so we need to check
    //that the value is actually going to change. If it isn't, override to the opposite scheme instead.
    if (
        !colorSchemeOverride
        || colorScheme === "dark" && prefersDarkQuery.matches
        || colorScheme === "light" && !prefersDarkQuery.matches
    ) {
        colorSchemeOverride = oppositeColorScheme;
        localStorage.setItem(LOCAL_STORAGE_KEY, colorSchemeOverride);
    }
    else {
        colorSchemeOverride = null;
        localStorage.removeItem(LOCAL_STORAGE_KEY);
    }

    [colorScheme, oppositeColorScheme] = [oppositeColorScheme, colorScheme];
    applyOverride();
    updateLabels();
});

-- This is a Haskell code block with a filename
hello :: String -> IO ()
hello name = putStrln "Hello, " ++ name ++ "!"

• This is an unordered list
• With two items
• And three items

At Narative, we’ve been fans of Gatsby from day one, using it to build performant and flexible products for both clients and ourselves. With the growing community interest in Gatsby, we hope to create more resources that make it easier for anyone to grasp the power of this incredible tool.

1. This is a numbered list
2. Two
3. Three
4. Four

• This is a completed task
• This is an uncompleted task
• This is another uncompleted task

This is italic text. This is bold text. This is strikethrough. L^AT_EX. code.

Actual L^AT_EX: ∃x∀y(Rxy ≡ Ryx)

One of the challenges I had when learning Gatsby was trying to understand the Gatsby lifecycle. React introduced me to the concept of a Component Lifecycle, but when I started learning Gatsby I felt at a loss again. I remember looking through example repositories and seeing Gatsby specific files in every project and thinking to myself, “What are these files for? Why are gatsby-node.js, gatsby-browser.js, and gatsby-ssr.js generated in the default starter kit? Can I really delete these files?”

To understand what these files are for, we must first understand how Gatsby works. Gatsby is a static site generator that pulls data from sources you provide and generates a website/app for you.

Gatsby requires Node to be installed to run the Bootstrap and Build sequences. Under the hood, Gatsby uses Webpack to build and start a development server amongst other things.Footnote ¹