Image for post
Image for post

Chances are if you are developing a blog or a CMS you want the user to be able to rate articles or products. This will give you the ability to recommend products based on how popular a products has become.

This article will go over how to build a Start Rating component in React using Codepen.

Here is the Codepen if you just want to jump into the code:

Star Rating Component in React

So now let’s go step by step if you are new to React or like to see how to use functional components.

First let’s head on over to https://heroicons.dev and pick out a star icon. …


Image for post
Image for post

Being a developer is difficult. Most of the learning you do in school doesn’t apply to the career you will have in the future. The skills you have today will become obsolete. The training you receive at your company wont prepare you for all that is necessary in completing certain tasks. However the greatest difficulty is the way we think about ourselves.

Solving Problems

Before talking about the dreaded imposter syndrome lets talk about solving problems. …


Image for post
Image for post

React state management is a broad topic, and choosing the right management tool is often difficult. React is known for its missing state management tool often leaving it to the developer to figure it out. However, over the years, some great tools have emerged giving the developer some powerful features.

This article we will use Recoil to build an alert component, but you can apply the same principles in any state management tool you choose.

If you want to just jump into the code here is the repo for the whole project:

Setup

I will be starting the project from a starter project I created called, Next.js Tailwind CSS Starter. …


Image for post
Image for post

My story is as follows. I was on the Tailwind CSS website the other day, and I noticed they have an awesome auto coder pad on their main page. As the auto coder pad types it changes the css so you can see how to use Tailwind CSS to create styled components. So naturally I wanted to add it on my entry level developer training website.

When I first started to think about how to do this I first went to NPM to see what packages I could use to highlight the code for me.

I decided to use Highlight.js along with React Highlight.js which is a light wrapper around the library. …


Image for post
Image for post

In this article we will go over how to create a confirm dialog using React and Tailwind CSS. This article will roughly go over the logic in my other article, Creating a Confirm Dialog in React and Material UI, however this article will use Tailwind CSS.

There comes a time in every application where you want to delete something. So like every developer, you add a button, that when clicked on, deletes the resource.

Wether it’s a blog post, a shopping cart item, or disabling an account, you want to protect against unwanted button clicks.

Enter the Confirm Dialog.

Sometimes you do want to execute an action without always prompting the user with a confirm dialog, and sometimes it can be annoying always prompting them. …


Image for post
Image for post

In the world of web design, CSS breakpoints help us design a more robust, responsive website, detecting when to show and hide certain elements, resizing components to fit, or stretch on mobile devices, achieving a smooth user experience.

In this article we will discuss how to use CSS breakpoints in Material UI.

Here is the example Github repo we will be using if you just want to dive into the code. You can view the Readme to get started.

What is a CSS breakpoint?

A breakpoint is defined in CSS when it detects certain screen sizes, and when the defined breakpoint is hit it will then show appropriate content for that screen size. For instance, on a desktop browser you have plenty of room to show large and wide elements, however, on a mobile device you have to plan out what you absolutely need to show and what will decrease in size. …


What an API is, what it means to be RESTful, and how to implement these using Node.js

Image for post
Image for post

Introduction

In this article we will discuss what an API is, what it means to be RESTful, and how to implement these using Node.js. The Node.js packages we will be using will be Express for our API endpoints and Sequelize to query our database.

Learning how to create an API is a delicate process. Developers just want to build endpoints fast, so they can quickly get something ready for a webpage to consume. However, learning how to make things RESTful will make your API more consistent, predictable, and scalable.

This article is assuming you know how to create an Express server and connect to a database with Sequelize. …


Image for post
Image for post

JavaScript enables browsers on desktops and mobile devices to interactively engage with websites. The eco system of packages and frameworks enables developers to write code to better help developers. In recent years it has become popular to use JavaScript in places other than browsers.

JavaScript has become the language of the internet. Anyone that has an idea, can quickly create, build, and deploy Full Stack applications by using JavaScript.

Full Stack means that we are creating, building, and deploying, services on the browser, such as Chrome or Safari, and host back end servers that connect to database and process events.

Front End

  • The look and feel of the application. …


Image for post
Image for post

Now that we have all become accustomed to working remotely, using chats, video conferencing, and screen sharing, we have been encouraged to share ideas, and with that, a need to create custom workflows.

In this article we will explore three popular technologies, Slack, Google Cloud Functions and NodeJS. Combining these technologies will improve our workflow in Slack.

To start we will go over how to create a Google Cloud Function. If you aren’t familiar with Google Cloud, I suggest trying it out for free.

To create a Google Cloud Function go to the Functions page:

  • Click Create Function.
  • Give it a name, such as alert-cpu. …


Image for post
Image for post

Developers should strive to write clean, maintainable code. One of they key principles to learn in programming is how to implement loose coupling and high cohesion.

In this article we will use JavaScript classes to implement these design patterns and discuss why they make code more maintainable.

You can check out the code example from the repository here:

https://gitlab.com/sundry/javascript/gamelib

What is loose coupling?

Loose coupling refers to how much a component of code knows about the inner workings of another component of code. If it depends on knowing too much about a certain component, then it is considered highly coupled. …

About

Andrew Bliss

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store