Use semantic HTML to make your web page easier to understand for users of your site who don’t look like you.

As a web developer you have a responsibility to write semantic HTML that will make your web page effective at conveying information not only to users like you, but also users very much not like you — robots, screen readers, SEO crawlers looking for structured data to build search rich results, humans with varying levels of disability, and many others.

credit: https://seekbrevity.com/semantic-markup-important-web-design/

Why HTML

The first thing is to understand, philosophically, what the imagined separation of concerns is between HTML, CSS, and JS, the building blocks of the web.

JS is for interaction/behavior and management of state (besides some very basic state that may…


Introduction to important categories and concepts

SEO stands for search engine optimization, and it is simply put “the process of making your website easy for search engines like google to find and read your website”.

It should be one of the primary considerations for every modern application developer, and ff you are developing a website professionally, taking SEO into consideration while building your website can make a huge difference to your companies bottom line.

There are a few primary categories of optimizations that will allow you to excel in SEO. At some point I would like to delve deeper into each of these topics, but for…


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: toptal.org

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 best known 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…

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