Select...

Posts

PWA with React and Vite.

Let's make a Progressive Web Application (PWA) According to MDN Web Docs. Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an…

Vite Test.

Vite Test Quick Vite Test working example I can refer to later. Create React Application with Vite Install dependencies Configure Add scripts to package.json Create a component to test Create a test Add some test utilities

Vite + REACT + Zustand.

Zustand In the previous post, I implemented a REACT app with Redux Toolkit, which is much better than Redux. Let's see what the same example looks like using Zustand. I think I will like this better, but who knows until we make the comparison? Create…

Vite + REACT + Redux Toolkit.

Redux toolkit I'm not a Redux fan. Mobx always made more sense to me and was far easier to use. However, Redux seems to the VHS of global state management. Redux Toolkit round the sharp edges, making Redux dev friendly. This repo is based on Let’s…

Explore Prisma with REST and GraphQL API

Easy REST and GraphQL with Prisma Prisma is an Object to Relational Mapper (ORM) that makes working with databases more accessible and consistent. Prisma supports both Relational Databases like PostgreSQL and Document Databases MongoDB. Let's use…

Customizing the GraphQL Schema

Customizing the GraphQL Schema This post is a reminder to my future self of how I created a generic resolver for a Headless Drupal project. The Gatsby docs on Customizing the GraphQL Schema is here The setup for this example will follow the Gatsby…

Swagger API in Gatsby

Let's add Swagger to a GatsbjyJS site. SwaggerUI does not have a handy Gatsby plugin or a React wrapper, but that's no problem. Create a new Gatsby site I deleted all non-essentials. I want a simple index page. Reference this repo to see everything I…

Plotly - Animated Map Scatter Plot

Let's do a more advanced Plotly example. I don't see any tutorials on Map plot animations. It took me quite a while to get this right, although I don't know why. Now that I have the solution, it seems obvious, To get started, create a new Gatsby…

Not So Static Sites - Introduction

Not So Static Sites Meetup tutorial intro to GatsbyJS static generator Prerequisites Following this tutorial requires having node version 14.19.2 or higher installed. Check if Node is installed. There are many ways to install Node if you do not have…

Get started with Plotly - Pie Chart

Let's play with Plotly today. We will start with something straightforward, Pie charts. To get started, create a new Gatsby project following my previous post. Add the React Plotly wrapper to our project with the types. Now let's add our Pie Chart…

VSCode - prettier

I spent way too long figuring out why Prettier was not working in VSCode. Timo Ernst had the answer here This is what Tim says: First, press shift + cmd + p (Mac), enter “settings” and choose “Preferences: Open Settings (JSON)”. Then add the…

Deploy a GatsbyJS project on Gitlab Pages

I'm not sure how useful this is in real life, but I want to use it for several demos, so I'll write it up here once and reference it later. Step 1: Create a Gatsby Project Let's create a Gatsby project to get started. We can use the Quick Start Link…

Generate CHANGELOG.md and enforce commit message standards.

Generate CHANGELOG.md and enforce commit message standards. I'm pressed for time today, so I'm only including the README.md. I'm not going to add much in the way of explanation. The document should be sufficient to help my future self remember how to…

Faster Gitlab CI/CD

Fast Gitlab CI/CD When I first tried to switch to Gitlab CI/CD, I was disappointed by the slow build times. Let's see if we can do better. Let's try building a React application. Now add a file gitlab-ci.yml and let's build it. We are using the basic…

More Serverless

More Serverless In the post let's look at more complex example than the previous post. In this example let's create a stack like this: API Gateway --> Lambda --> SQS --> Lambda --> Dynamo DB Install AWS Setup You need set up some config files next…

Try Serverless

Let's Try Serverless This is going to be really quick and intended to refresh my memory later. Install Let's see if it will run locally. AWS Setup You need set up some config files next . .aws/config https://docs.aws.amazon.com/sdk-for-javascript/v…

NPM Publish 3 ways: Local, NPM, and GitLab

Publish MPN module 3 ways: Local, NPM, and GitLab Let's explore publishing NPM modules. We will walk through the process of publishing a module locally, which is great for local development. Then we will try to publish a module to the NPM repository…

GitLab Pages + GitLab CI/CD + Storybook + React

Let's have a have at look at Gitlab Pages. In this example, we will create a sim[ple React app, add Storybook, and publish the static Storybook pages to Gitlab Pages. Let's get started. Create a React app We can use crate-react-app for this Make sure…

Typescript - Get started the easy way

Do you want to get started with Typescript but don't want to deal with Bable configs. Maybe your Team is not fully onboard with Typescript, and you want to provide a gentle nudge. Maybe converting your entire project over to Typescript is more effort…

AWS S3 + DynamoDB + API Gateway + Lambda

Today I want to look at a way to interact with S3 securely and at scale. I want to run everything locally if possible to make it faster to develop. I also want to keep information on files I have Uploaded/Downloaded, and I'll use DynamoDB for this…

AWS Lambda Layers

I need to create several Lambdas in AWS that are all similar. I want to share some code between them. I could publish an NPM module, but it would probably need to be private, so I would need to create a paid account. Let's try Lambda Layers instead…

AWS Textract

A potential client recently asked me about document processing options. The client likes AWS and Javascript since the team has experience in these areas. The following is a set of small nodeJS apps to prove an architecture concept. This is all pretty…

Learn React Native

This is a place I will be testing out React Native. Navigation This example tries to pull together all the navigation schemes Stack Navigation with Search / Detail style screens (see Home and Detail Screens) Drawer Navigation (see Profile Screen) Tab…

Gatsby Silly Site Challenge - CSS Yule Log

Gatsby threw down a silly site challenge the other day. I figure I don't know enough about CSS, so building something in Pure CSS will be a great learning experience. My goal is to create a burning Yule Log. Thanks to https://speckyboy.com/flame…

Let's look at NEXTjs

Today I took a look at NEXTjs, which was long overdue. The feature that caught my attention is the ability to generate pages in multiple ways. I think it will be interesting if we can have an example of each in a single app. Static Site Generation…

Learn Javascript the fun way, Build a Game

Here is a fun way to practice our programming skills; let's build a simple game. We will use Phaser3, a Javascript 'framework' for creating all sorts of games. Play 'game' is here Prerequisites You will need these to install before you start. NodeJS…

Kubernetes ... What, Why, and How

It's finally time to make a few notes on Kubernetes. We have already looked at Docker and Docker Compose, so we can use that knowledge to explore what Kubernetes is. If you want a great YouTube resource to get started, you should check out Docker and…

Quick Tip: Node JS profiling

Clinic is a tool to profile your node apps. https://clinicjs.org/ You should visit the site to learn how to use the tool. Following is just a cheat sheet. This assumes you have a Node JS application you can start with node app.js Install Autocannon…

Quick Tip: Easy Search with Netlify

I just love Netlify; they always have something interesting. I found this extension for adding search to your site. You can use it either client-side or server-side. It's a step you can add to the build that indexes your pages into a JSON file. For a…

Quick Tip: Snyk security scanner

I recently ran across a slick tool called Snyk at https://app.snyk.io. This tool will scan for security and license problems in your NodeJS dependencies. It also helps create pull requests to resolve any problems. I started here following the GitLab…

Grafana and Prometheus with Node

Create a NodeJS with Koa Bootstrap a NodeJS Koa server like this. Add this script package.json Create our server Create an entry point. server.js Add a Route routes/index.js routes/root.js routes/metrics.js Test it Start our server and test it like…

Tracing in Node

Let's do some tracing in Node. (I have a post on Tracing in SpringBoot here Tracing is an essential part of a microservice architecture. You need to be able to examine an event lifecycle. Events flow through many microservices, transforming, forking…

Tracing in Spring Boot

Let's do some tracing. Tracing is an essential part of a microservice architecture. You need to be able to examine an event lifecycle. In a microservice architecture and event will flow through many microservices, transforming, forking, and merging…

Metrics with Spring Boot

When working with Microservices, you need a way to monitor your services. The cloud providers like AWS have their proprietary solutions, which may be perfectly fine. However, in this post, we will build a Spring Boot Admin Server to monitor Spring…

My NodeJS Microservice Recipe

This is my recipe for a Microservice implemented in NodeJS. I'm fairly new to NodeJS as opposed to Java SpringBoot (see my recipe for SpringBoot Microservices here). I look forward getting challenged on my chosen stack so I can refine and improve…

My Java Microservice Recipe

This is my recipe for a Microservice. Ingredients: Java SpringBoot DevTools Lombok Database Presistence API REST GraphQL JMS Kafka in Docker Producer / Consumer Monitoring Tracing Configuration Directions: Go to https://start.spring.io/ and add…

Clean up your Enterprise APIs with a Apollo Federated GraphQL

The Problem Your Business Unit has developed several independent services, probably using REST, probably designed by separate teams, and possibly implemented with different technology stack. Your troubles start when you want to create an application…

Quick Tip: Add Google Font to Material-UI for Gatsby

In this Quick Tip, let's add a Google Font to our Gatsby application using Material-UI. First, let's choose a font, so head over to https://fonts.google.com/ and pick something you like. Now that we have a font, we need to import it into the project…

Quick tip: Custom Material-UI styles with Typescript

I recently started to use Typescript with Material-UI. I wanted to add color instances to the palette for the AppBar and Hero background. No problem, just edit /src/gatsby-theme-material-ui-top-layout/theme.js like this. Dang, now I have errors in my…

Template for building a Gatsby project with Hasura and Auth0

This post is a quickstart template for new projects that are written in Gatsby and use Hasura for data persistence and Auth0 for Authentication and Authorization. Other posts go into details of setting up Gatsby and Hasura and Auth0. This post's…

Docker Cheat Sheet and Alternative

I don't use Docker or Docker-Compose enough to get the command-line muscle memory I would like. To remedy this fact, I thought it would be a good idea to create a cheat sheet to help my future self. After looking around for a bit, I found that I can…

Hasura Authentication and Authorization with Auth0.

I had to hunt for this solution, so while it's easy to implement, finding the correct incantation is not. Reference my previous post on setting up Gatsby with Auth0 for a complete solution. https://jameskolean.tech/post/2019-08-27-gatsbyjs…

Need a Dynamic Web App? Use a Static Site Generator.

If you need to build a Dynamic Web Application that must be performant, scale, and secure, then a Static Site Generator may be what you need. What sort of Web Applications are we talking about here? In the past couple of years, I worked on several…

Four reasons you should use GraphQL instead of REST

Clients can ask for only the data it needs. REST typically forces clients to consume a predefined payload. GraphQL allows clients to ask for only the information they need. Smaller information payloads result in lower latency and less work in the…

Gatsby + Netlify Functions + FaunaDB

In this post, we will see how I added the 'Thumbs Up' functionality to this site. The challenge is, of course, that this is a Gatsby statically rendered site, which is great because it's crazy fast and only required a CDN to deploy; however, there is…

Setting up a Springboot Configuration Server

Basic Setup The basic setup covers getting two servers up and running; the Configuration Server and the Configuration Consumer Application. We will get things up and running then iterate on the solution with additional features. Configuration Server…

PostGraphile vs Hasura vs Prisma

Install Postgres Download Postgres here https://www.postgresql.org/download/ and install the application. Make sure you create a server using the button in the lower-left of the Postgres window and start it. Note that you will need to update $PATH to…

AWS SQS in SpringBoot

Let's see if we can connect a SpringBoot application to Amazon Simple Queue Service (SQS). To get started, go over to the AWS Management console, go to the Services tab, and search for SQS. Once on the SQS page, click the 'Create New Queue' button…

Flare Animation in Gatsby

Rive offers a tool called Flare for building vector designs and animations. Check out their news release news release. Usage Export you animation as an *.flr file. Place the file in the static folder Add the react-flare dependency npm install flare…

Code Blocks in Gatsby Markdown

I have a lot of code blocks in my posts, so let's see if we can make them a bit prettier and easier to use. Let's add two dependencies. The first will make the blocks look better and give us a better editor experience in Netlify CMS. To setup just…

Framer Motion: Animation Clean and Simple

I wanted to add some animation to this site. I heard good things about Framer Motion, so I gave it a try, and it exceeded my expectations. It was so clean and straightforward to add a little animation. My biggest issue was to hold myself back from…

SpringBoot + MongoBD + REST + GraphQL

I have a potential opportunity to use MongoDB on a project. I decided to build this simple application to see if anything changed since the last time I used Mongo DB. You can find the source here. Start by going over to Spring Initializer at https…

Cool Tools 2020

CloudCraft AWS resources diagram and pricing tool. Nice diagrams and controls. Intuitive User Interface. VisBug Chrome plugin to experiment with an existing Web Page Insomnia Rest Client – GraphQL This is a very nice GraphQL client. Postman is not…

Protect Static Resources => Lambda@Edge + AWS S3 + Gatsby

Source:https://gitlab.com/jameskolean/gatsby-lambda-edge Create a Gatsby starter app. If you have not installed the Gatsby CLI, nows the time Now let’s use it to create our starter app. Let’s test our new application. Open a browser tohttp…

Protect Static Resources => Cloudflare Workers + AWS S3 + Gatsby

Setup Cloudflare The way Cloudflare works is that it manages an entire domain. For this test you may want to purchase a domain. Once the domain is purchased, the process of bring it into Cloudflare is very simple but will take time for the DNS…

Easy Lambda with Gatsby and Netlify Functions

Let’s look at how to use Netlify Functions in Gatsby. Why do we want to do this? Gatsby is a static site generator, which is excellent for many reasons, one of which is that no server is required making it easy to host and lightning-fast to run…

Netlify Redirects

Netlify allows redirects at the edge. There is an example Gatsby project here. You basically have two options, the first is the simplest and the second allows for complex rules: Use _redirects This requires a file called _redirects in the static…

What’s the difference between docker compose and kubernetes?

Stack Overflow has a concise post on this at https://stackoverflow.com/questions/47536536/whats-the-difference-between-docker-compose-and-kubernetes It says: Docker: Docker is the container technology that allows you to containerize your…

SpringBoot and Kafka Streams and Bindings

This is a follow up to my previous post. After watching the YouTube video Spring Tips: Spring Cloud Stream Kafka Streams it’s clear I was missing the power of Kafka. Following the tutorial I ran into issues performing the count. The error points to…

SpringBoot and Kafka

This is a simple tutorial to show how easy it is to get Spring Boot connected to Kafka. The source code can be found here. Let’s start by getting Kafka running using a docker container. I’ll assume you have Docker installed. Create file docker…

GatsbyJS and Shopify

I started to look into building a POC integrating Shopify with GatsbyJS but I found an excellent starter already exists. Here are the instructions to run the demo. If you don’t have the gatsby-cli installed, now is the time. Follow instructions at…

GatsbyJS with Headless WordPress

This is a quick tutorial on setting up Gatsby with Headless WordPress. The source code can be found here. You will need to setup and configure your own instance of WordPress if you want to follow along. The instructions will help you through this…

GraphQL in SpringBoot backed by JPA

The code is here. Start with spring initializer and add web, devtools, lombok, liquibase, and JPA support. Add in the dependencies for GraphQL and you end up with something like this. I use Liquibase to set up some sample data. You will need these…

GatsbyJS + Netlify CMS + Local File

I looked into Netlify CMS today and am liking that it is open-source and Git based. I was surprised that when I was working locally it was making commits to the remote repository. That felt wrong to me, now I could be wrong since I have limited time…

GatsbyJS with Auth0 Springboot services

The GatsbyJS part could not be simpler. Let’s use Axios which is a pleasure to work with but we will also use hooks to make it a thing of beauty. You will need to reference GatsbyJS Authentication with Auth0 for details on setting up authentication…

Grafana and Prometheus with Spring Boot

I’m not sure how I feel about this combination. I had high hopes but it’s been frustrating to get working. I guess if I had the time it would be useful to create a slick dashboard and alerts against Spring Actuator parameters. Let’s get started…

Micro-service notes

These are my note on setting up Micro-Services with Spring Cloud. I went thru many tutorials that had broken dependencies. I put this together so I have a working stack I can reference. In the blog we will build servers for Configuration, Discovery…

GatsbyJS adding Video and Audio

This this post I added Video and Audio to my GatsbyJS site. The Video and Audio assets are stored in Contentful. This example uses a Lesson Plan created by an instructor. The Lesson Plan is a document that can have many heterogenous sections. In this…

Getting Content from Contentful for Gatsby

I’m building out a sample project and it’s time to add some content. In the last post we set up a simple GatsbyJS site and added authentication with Auth0. Now it’s time to get some pages built and let’s use Contentful to store that content. This…

GatsbyJS Authentication with Auth0

This post describes how I added Authentication to my GatsbyJS application using Auth0. The source is here. I’d like to thank Jason Langsdorf for his Live Stream that I used to build my solution. I highly recommend checking out his videos. Getting…

Copyright © 2020 Code Green LLC