What is it and how does it help to speed up your application?

ReactJS is known for making creating interactive, stateful UIs easy. React is also known for increasing your time to first load, and for creating interfaces that are not easily understood by search engine crawlers.

Both are very bad things and might not be suitable for a production application 😆

The reason for both of the above issues with React is that React applications generally return ONLY the following HTML to the browser initially:

<div id=”root”></div>

…and then they kick off the react rendering process which generates all of the rest of your page on the clients browser. Depending on the…


What are React hooks, and why are they important?

credit: fireship.io — https://www.youtube.com/watch?v=TNhaISOUy6Q&t=367s&ab_channel=Fireship

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’…


How using native and custom events in your programs helps to simplify and modularize.

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…


Paradigms for Organizing your CSS in 2021

Modular CSS. Credit: topta

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…


And why should you implement one on your website?

source: https://www.rahulpnath.com/blog/http-content-security-policy-csp/

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. …


An Overview of Building a chatbot on AWS and the Tools Required

Credit: Amazon.com

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…


A fundamental cloud computing exam

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…


How to reroute users to a public login page when they try to access protected routes.

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.


Where and when variables will be accessible in your code.

Scoping is important because we want to as much as possible follow the Principle of Least Privilege when writing programs — that is, if you don’t need to reveal your variable to the rest of your program, then keep its scope isolated. This important for many reasons, including reducing the chance of creating bugs/side effects, and increasing the efficiency of garbage collecting of variables while your program is running.

There are many articles out there on this topic so I wanted to really quickly break it down in a way that makes sense to me in 2020 (because things do…

Alex Zito-Wolf

Product Manager + Software Developer. Interested in Travel, Culture, and the Internet.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store