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…

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.

…

Wrapping up my 3rd week of a 16 week coding bootcamp, I can tell you that there is no substitute for staring at a coding problem while your brain struggles. Leading up to class, I had been doing a lot of practicing (because everyone knows practice makes perfect), but I wasn’t struggling.

You always hear that everything you need to learn how to code is on the internet already. Codecademy, Udemy, FreeCodeCamp, LabEx, and many more will provide you with a wealth of easy to follow information. HackerRank, Codewars, and others will provide you with simple algorithms and interview practice.

…