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:
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. …
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.
Before talking about the dreaded imposter syndrome lets talk about solving problems. …
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:
I will be starting the project from a starter project I created called, Next.js Tailwind CSS Starter. …
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. …
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. …
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.
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. …
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. …
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.
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:
alert-cpu
. …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:
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. …