You’ve got your React components. You figured out how to use Redux to feed them data. You make a component that creates/updates/deletes an item in your API, and put it in a page displaying the items from your API. How do you get the whole page to reload to show the updated data every time a user makes a change? Redux state and the useEffect() Dependency Array.

It is possible to use only React to pass the data from our counter to the parent element to get almost the same counter effect in my example below, but using Redux state…

I committed to studying web development in March 2020. By the end of August 2020, I quit my job. I graduated from a coding bootcamp in the beginning of January 2021. In March 2021, I accepted my first developer role.

My previous role was in high volume engineering recruiting. A typical day for me would include reading job descriptions, scheduling interviews, and customer service for candidates, clients, and current contractors. Sometimes that even meant hiring and firing. …

When I rebuilt my portfolio site, I knew I wanted to have some fun with the design, and a dark and light mode fit the bill. I enjoyed a lot of the discoveries I made during this project, but my favorite has to be the color changing SVGs. This tutorial assumes familiarity with React, and I am using v17.0.1 and functional components.

First, I created a base layout. Next, I put together my dark and light color schemes. It took a little trial and error, but after testing all my combinations for sufficient contrast and experimenting with placement, I found…

We’ll use a shifting background gradient, a simple transform: translate animation, and a button styled like text.

I’ve been reading up on design principles for web projects. For my last big project, Gachasphere, I wanted to implement hierarchical buttons. So I made 3 button styles to apply across the site: primary, secondary, and tertiary.

I wanted the primary button to be used for calls to action and “dangerous” actions like delete. Ideally, it would be one of the first things a user’s eye would be drawn to.

My goal for the secondary button was to make it easier to find…

It’s been 323 days since I first started this coding journey. Today I finished the #100DaysOfCode challenge — a public commitment to code an hour on personal projects every day for 100 days.

One of Kallaway’s rules is that you can miss a day, but not two days. With the exception of 4 day breaks over Thanksgiving and Christmas, I achieved that… while completing DigitalCrafts’ Immersive Full Stack Web Development Bootcamp. Would I recommend everyone do #100DaysOfCode on top of a bootcamp? No. …

Object Oriented Programming (OOP) languages, like JavaScript and Python, organize software design around data, formatted in objects, rather than function or logic.

First, I’ll cover the basics: objects, classes, instance, and methods. Then, I’ll briefly explain the four main pillars of OOP design: Encapsulation, Abstraction, Inheritance, and Polymorphism.

Objects

An object is data formatted to represent a real world object that has a state and behavior.

Picard’s state would be “wants to set a course” and his behaviors would be telling an ensign the desired course and to “Make it so.”

Classes

Different programming languages go about this different ways, but essentially…

I’m a believer in finding joy in the little things, and during my last project, that little thing was this button. I have been reading a lot about web design, and wanted my primary buttons to stand out in a big way. I had seen an image of a square button with an offset border while researching a design for an even earlier project, but never got the time to implement it. So for weeks, I’ve been trying to find the time to build this baby, and it was worth the wait.

If you’ve ever read anything about HTML on Mozilla Developer Network, you’ve probably come across the phrase “semantic HTML.”

“Semantic HTML is the correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance.” — Springboard SEO

Meaning that appearance should be left to CSS (instead of using presentational HTML elements like <b>). Any developer’s goal should be to make their webpage accessible to as many users as possible, including those that rely on screen readers or keyboard navigation. Not to mention, a lot of these practices will bolster your SEO.

…