Articles

• Another easy Eleventy upgrade

  Another easy upgrade with the NodeJS simple static site generator Eleventy (11ty) from v2 to v3.

• Create Custom Components in MUI

  In this article we will create custom components in MUI (Material UI) using ReactJS and Storybook.

• Build a Full-Stack web app with Next.js - Part 7 - Radix Components

  In this article, we will continue building a full-stack web app with Next.js. We will be using Radix UI components to build our components in isolation using Storybook.

• Build a Full-Stack web app with Next.js - Part 6 - Storybook

  In this installment we create a Storybook for our project and start building out our Header component. I walk through some of the features of Storybook and how it can help you build your React components in isolation.

• Build a Full-Stack web app with Next.js - Part 5 - GitHub Project

  In this tutorial video we continue planning our full-stack web app with Next.js. We create a GitHub project and start adding tickets to the project. We also start building out the first components for the project.

• Build a Full-Stack web app with Next.js - Part 4 - DB Design

  In this video, we will be designing the database for our app. We will be using dbdiagram.io to design our database. We use DBML to define our tables and denote the relationships between them. Using the export option, we quickly create the tables in our ERD (Entity Relationship Diagram) on Supabase.

• Build a Full-Stack web app with Next.js - Part 3 - Supabase

  This is the third video tutorial on building a full-stack Next.js with Supabase. Andrew discusses how to display a list of courses on a webpage using data from a Supabase database. He explains how to use SQL queries to retrieve data from the database and display it on the webpage and also mentions using Superbase's table editor to edit the database and provides a brief overview of plans for future development.

• Build a Full-Stack web app with Next.js - Part 2 - Set Up

  This is the second video in the series on building a full-stack web app with Next.js. In this live stream, Andrew Ford set up Next.js, configured it for the project, installed Radix UI, created a Superbase database, and started adding routes. The project code is available on GitHub as LMS NextJS.

• Build a Full-Stack web app with Next.js - Part 1 - Planning

  This is a transcript of my stream that went through the initial planning stages of a Next.js project, starting with brainstorming ideas on a virtual whiteboard. Wireframes were then created in Excalidraw to visualize pages like home, sign up, course listings, and course details. Key requirements around authentication, data storage, roles and permissions were mapped out. Superbase was selected to provide authentication via LinkedIn/Google login as well as for it being a Postgres database. Next.js was chosen for its React framework and Radix UI was selected for accessible, customizable UI components to speed up development.

• Dev Containers In VS Code

  Dev Containers in VS Code allow packaging a project's dependencies and tools into reusable container images. This provides a consistent development environment between machines by launching the project within its dedicated container in VS Code. The live demo showcased common workflows like debugging, installing extensions, and using codespaces for cloud-based container development.

• AI-Assisted Coding Tools Comparing CodeLlama and GitHub Copilot Chat

  Explore the strengths of CodeLlama's offline assistance and GitHub Copilot's Chat in this AI-assisted coding tool comparison.

• Make ChatGPT even easier shortcut on iOS

  A better way to use ChatGPT on iOS and not lose your context using this shortcut.

• Tailwind Grid Cheatsheet

  To help you remember the Tailwind grid classes, get your copy of my Tailwind Grid Cheatsheet.

• Teaching Software Development with AI

  This educational innovation plan focuses on leveraging technology to enhance remote education practices by implementing AI tools to assist learners in their learning journey.

• Reflecting on my practice as an Instructor

  A reflection on my practice as an instructor teaching Software Development at Developers Institute.

• Collaboration when Learning Software Development

  Recent advancements in collaborative software tools have made it easier for remote learners to participate in coding solutions together.

• Make a LastFM widget for your website using Serverless functions

  Here is the latest transcript of my guide on how to make a LastFM widget using Serverless (Netlify) functions to show the latest track played on your website.

• Make ChatGPT easy to use on macOS and iOS using Shortcuts

  A tutorial on making it easy to use ChatGPT on macOS and iOS using shortcuts.

• What is Tailwind CSS?

  An introduction to what Tailwind CSS is, and its pros & cons.

• Build a shop with Next.js and Stripe - Checkout

  Concluding with the Next.js & Stripe online shop we now will add the checkout functionality

• Build a shop with Next.js and Stripe - Display the products from Stripe

  Continuing with the Next.js & Stripe online shop we now will display the products from Stripe.

• Build a shop with Next.js and Stripe - Stripe account set up

  Continuing with the Next.js & Stripe account setup

• Create your own UI Component Library

  A guide to getting started creating your own UI Component library with ReactJS, TypeScript and Storybook

• Build a shop with Next.js and Stripe

  Introducing a new series on how to build a shop using Next.js and Stripe

• Full Stack Developer to Instructor

  After 20 years being in the software/web industry with roles like web developer, analyst developer, lead developer, software engineer, and full stack developer. I decided in August to take a side step in to teaching.

• Tailwind Flexbox Cheatsheet

  Get your copy of my Tailwind Flexbox Cheatsheet

• Tailwind Theming by Config

  Using tailwind css and environment variables to reuse code for multiple brands on the same codebase.