Web Development

Showing or hiding the Table Of Contents, depending on whether it exists or not.

A final recap of the Frosty CMS project, features, screenshots etc.

Querying for a specific Strapi post using GraphQL query variables.

Comparing Strapi to Contentful and the trials and tribulations of setting up Strapi with a cloud based Mongo database.

How to create a custom 404 page and the basics of React Helmet, which handles site meta-data dynamically.

Connecting Gatsby to Contentful CMS. Creating a data model and querying API endpoints with GraphQL. Pulling data into templates.

Adding images to Markdown based posts in Gatsby using gatsby-remark-images

Using the Markdown filepath to dynamically generate a page slug and page for each markdown file, and then linking to those pages on the post index.

Sourcing Gatsby blog post content from local Markdown files. Iterating over API data to list posts.

Intro to GraphQL. Pulling in dynamic content from GraphQL API. Constructing data variables. Replacing GraphiQL with GraphQL Playground

Gatsby installation, pages, links, shared components, layouts, styling, plugins, CSS modules and active nav menu items.

Preventing repetitive API requests by creating a new action called fetchPostsAndUser to store author data before header component loads.

Fetching author data by matching author ID from posts in a React-Redux based blog app.

How to fetch data from an API inside React using Redux and Redux-Thunk. Using that data to display a list of blog posts.

Covers file structure, action creators, reducers, combining reducers, provider & connect. Sample app with a song list built with Redux data. Updating state with action creators.

Explains the Redux cycle in a React app. Redux replaces the standard state cycle in a React app, making it more manageable for large applications. Covers Actions, Action Creators, Dispatch, Reducers, State and Redux Store.

Creating a responsive masonry style image grid in React. Will also work for cards. This method uses componentDidMount so will not work with statis site generators like Gatsby.

Mapped arrays in React require each item to have a unique hey. This post covers why and how to implement them.

Making API requests with Axios, using Async Await for returned data. Looping over returned data. Axios custom client.

Intercepting the default form behaviour. Sending information from child (form) to parent (App) by invoking callback functions.