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…


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. …


Creating responsive websites in Tailwind CSS is a breeze, hence the logo. Responsive websites allow you to create one website that fits perfectly on all device resolutions, however figuring out what screen size you are on is sometimes a challenge.

Your best bet is to use developer tools to grow and shrink the screen according to the target device, however it can sometimes leave you to wonder what breakpoints you are hitting?

Here is a little HTML snippet you can use to show you what breakpoints you are hitting. …


Website animations

In this day and age websites seem to require animations. I would say, depending on what type of website you are going for, animations may be appropriate. In this article let’s go over how to trigger animations using React Hooks. We want to be able to control when the user sees the animation. When the user scrolls to a certain section of the website we will slide the element in using CSS.

Setup

For this article I will be using React and Tailwind CSS, however you can use whatever CSS you want to use. I will be using a component for…


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…


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…


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…


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…


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

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…


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

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