If you program long enough, you will make the mistake of “premature optimization”. Premature optimization simply means you put the cart before the horse and made your application too complex. Redux is a framework where this happens quite frequently. The useReducer hook is a way to manage state in React….
CSS Grid Shorthand Property Explained Simply
If there is one thing I’ve learned about CSS, it’s that CSS loves shortcuts (aka “shorthand” properties)! The grid property is CSS Grid combines the following properties. Like most shorthand properties in CSS, depending on how many variables you add to the property will determine how it behaves. Implicit vs…
CSS ‘>’, ‘+’, ‘~’ Selectors Explained Simply
Knowing CSS selectors is easily one of the most important aspects of web development. As a former backend developer, it makes me cringe how bad I was at CSS selectors. Not knowing selectors is known to cause mangled front ends and ugly Bootstrap UI’s! Element Type Selectors The most basic…
CSS Transitions Explained Simply
In a nutshell, transitions provide a way to control animation speed when changing CSS properties. You may have noticed that some elements seem to almost have a mind of their own! By using transitions we can choose between initial and target states. But most of all, transitions all properties to…
React useEffect Explained Simply
In useEffect, the word “effect” refers to a functional programming term called a “side effect”. To really understand the concept of a side effect, we must first have a grasp of a pure function. React components are intended to be pure functions, meaning they receive a input and produce a…
UseRef in React Explained Simply
When you want to persist values between renders, you use “a ref”. First, you must add the ref to your component by import useRef Hook from React: Call the useRef Hook and pass the initial value that you want to reference as the only argument. useRef returns an object that…
React State Explained Simply
Explaining state is a very difficult concept simply because it is so broad. It is sometimes best to explain complicated things by explaining what they are NOT: State Is NOT: These items are not state because they don’t change from page to page and are static. State IS: These are…
React Rendering Explained Simply
Before components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes. Imagine that components are cools in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts…
Apache Sling & AEM Explained Simply
AEM is built using Apache Sling, a web application framework based on REST principles that provide easy development for blogs. Sling uses the JCR (Java Content Repository) to resolve objects via a URL. This allows developers to easily customize and build web components. Apache Sling Architecture In order to understand…
AEM & JCR Folder Structure Explained Simply
Whenever you create an AEM application it must be comprised of a single AEM package. This package can contain sub-packages include things like code, JSON, etc. AEM requires a separation of content and code. A single package can’t contain both /app and runtime-writable areas (/content, /conf, /home, and /apps). AEM…