Stop writing error prone URL strings and level up with a Javascript object for manipulating URLs in code.

Have you written this line of code recently?

const url = 'http://example.com/movies'; 
fetch(url)
.then(response => response.json())
.then(data => console.log(data));

Chances are if you are professional web developer at any stage of your career then yes, you write API calls like this all the time. For a simple example like the above, where the URL is 100% static, you can get away with using a simple string to define your URL. But when does that ever happen in real life 😄? …


Level up with an advanced HTML element to help you create options lists for text inputs

The datalist element allows you to provide simple autocomplete functionality to your text inputs for a form. The element can also be used with Javascript to dynamically load content for the dropdown from a remote API endpoint. The one major drawback to using this method versus a completely custom autocomplete component is that the datalist generated options have almost no flexibility in styling, so what you see is what you get.

Generates the following output:

Make the list dynamic

To make the list dynamic you are able to use JS to fetch content from an endpoint like so:

The advantage of using…


My firsthand experience with the “Social Credit” system in the Peoples’s Republic of China.

It’s a quiet Saturday evening, I’m relaxing in my Shanghai flat with my roomate. The pollution is bad outside today, so neither of us is planning to leave the house for a while. We’ve made some stir fried veggies and are talking about real estate in the living room.

A knock on the door. My rooomate looks at me. I shrug, telling him implicitly I also am not expecting anyone.

The closest I could get to a photo of ChengYun. Credit:: iStock

I walk over and open the door. There’s a 45 year old woman in the doorway. She’s looking at me in amazement when I respond to her in Chinese. She…


Re-write your scrolling functions for better performance.

credit: Denys Nevozhai, unsplash.com

The Intersection observer API allows you to determine when and how much of an element is visible inside another element. This new API replaces the scroll handler API in many cases. The top use cases for the intersection observer are:

  1. Sticky navigation bars
  2. Live table of contents
  3. Some scrolling effects

A library for Serverside-rendered React, with data from a .NET Core backend.

As a developer who started learning to code with javascript, I have a soft spot for SPAs, interesting UI frameworks, and overcomplicating things 😅. As I’ve worked on larger projects across different areas of the tech stack, I’ve come to appreciate the simplicity of the classic application stack — a backend-heavy, serverside-rendered, .NET or PHP application.

For a few years there has been a disconnect between those two application styles, with new javascript developers coming into the game thinking that SPAs are the only way to write an application and old hands thinking that SSR is the only way to…


Level up as a web developer by using more advanced HTML markup

Credit: unsplash.com

I’ve been taking some time to revisit my knowledge of the basic web technologies, especially HTML and Accessibility. A lot of the time what separates a junior from a senior developer is not their knowledge of advanced patterns, but actually their knowledge of these natively supported APIs.

Once you know how much you can do with HTML, you are able to write lighter and more fully featured websites with more backwards compatibility.

One of those browser-supported features is the <picture> element, supported in all modern browsers. …


The most common headers that you will need to recognize as a web developer to communicate fluently with a remote API.

For most web developers, a large part of your job will be building pages that interact with and respond to, APIs that are located on a remote server. The more you know about the HTTP protocol, the better you will be able to utilize these API interfaces.

HTTP Headers are key value pairs that let the client (your web application) pass additional information back to the server, and accept the same type of date from the server. …


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.

Image of basic semantic HTML, 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. Simply put, it is:

The process of making your website easy for search engines to find and read your website

It should be one of the primary considerations for every modern application developer, and if 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 in this…


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…

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