Before we start talking about React hooks at all, I wanted to first answer the question — what are hooks? As a general concept hooks are interfaces that allow us to ‘hook in’ to an event or component of a system, and allow us to add or modify that systems behavior.

Callbacks are often used to hook into abstracted methods, allowing the author of that method to leave space for the user of the function to customize the execution of it later.

In the example below, we give the function user two different methods that they can use to ‘hook’…

Events are one of the single most important tools in your development toolkit as a JS developer. Whenever you want to have your script react to any user interaction on the page — a scroll, a mouse click, a tap on the back button, etc., you will generally write an ‘event listener’ into your script. In vanilla JS, that will be something like:

document.addEventListener(‘mousedown’, () => {    alert('you just clicked something');})

In the above code snippet, you are adding an event listener on the highest level node in the DOM tree: the document node. All of the elements in…

I recently attended “An Event Apart” a conference about the latest in design, UX, and development, and a talk by Nicole Sullivan inspired me to look deeper into CSS structure and some of the prevailing paradigms. The goal of this blog post is to share the latest in CSS structure and organization paradigms with you, and hopefully give you a high-level explanation of how they can work together or independently to help you level-up your CSS.

The paradigms that I want to unravel in this post are the following:

1. SMACSS
2. OOCSS
3. BEM

Throughout the article I will reference a Github…

CSP is one of your first lines of defense against malicious actors on the internet. What a content security policy allows you to do, fundamentally, is to to specify what addresses you want to allow your website to load scripts and other resources from. It looks something like this:

To set it you will either add the above line (configured to your liking) to the header section of every page on your website, or configure your server to do the same thing for you. …

What is Amazon Lex? Lex is a framework built by Amazon that helps you build, configure and deploy chat-based applications very quickly.

You can think of Lex as a custom REST API application running on a shared Amazon server, that has a simple yet secure set of instructions for interacting with a client application or any other AWS services. Using Amazons definition, Lex is a “Service for building conversational interfaces into any application using voice and text”.

AWS has a very specific definition of “service” inside their own ecosystem, which is essentially any process that will consume server resources on…

This is my study guide for the Azure 900. I hope that this will help some aspiring developers and techies to get a firmer grasp over these concepts and land your cert. The guide exactly follows the structure of the Microsoft Learning Online Courses, updated in 2021.

Part 1) Cloud Concepts

This part contains general knowledge about cloud computing e.g. what are the benefits of cloud, the differences types of cloud service offering, and the differences in cloud deployment models.

Technological benefits of cloud:

High Availability — The major cloud providers (Azure, AWS, GCP) have multiple data centers spread around throughout the world. Data and code stored in…

Background

React-Router is the go-to standard for routing with react. it allows you to specify which components you want to render for each url in the application, and makes sure that your app will rerender when the user navigates to a new page. If you haven’t been exposed to React-Router I would recommend starting with the basics here.

The fundamental core of react-routers functionality is made clear when you look at the <Route> component provided by the package:

import Home from './components/Home.js'<Route path="/" component={Home} />// Or this will render the same thing
<Route path="/"/> <Home /> </Route>

When the…

The ‘box shadow’ property applies a shadow with the parameters you specify to the box model container that matches the selector that you have written in CSS. You can play with the selector here.

The ‘text shadow’ property applies a shadow to all of the text nodes within the div that matches your css selector. You can play with the selector here.