Posted on

Putting JavaScript in CSS

Putting CSS in JavaScript is pretty much the norm these days - but what if we could do the opposite? Recently, I've been reading quite a bit about Houdini, which gives developers the ability to directly interact with the CSS Object Model.

One of the coolest things about it is that it lets us put JavaScript in our CSS. In the example below, I've created a background effect where the JavaScript is inside the CSS. Every time you refresh, the background is randomized. Check the CSS tab below to see JavaScript inside the CSS.

Posted on

Resolving HTTP Headers Sent Error in Node.JS

When using express and Node.JS, we will sometimes get this error:

  
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at new NodeError (node:internal/errors:277:15)
    at ServerResponse.setHeader (node:_http_outgoing:563:11)
    at ServerResponse.header (/node_modules/express/lib/response.js:771:10)
    at file:///link/to/file/app.js:309:13 {
    code: 'ERR_HTTP_HEADERS_SENT'


Posted on

A Practical Guide To Light and Dark Mode in Bootstrap 5 and Jekyll

Adding light and dark mode to my side project was a fun journey. I especially loved how intuitive the entire process was. The prefers-color-scheme CSS property contains the user’s color scheme - light or dark. We then define SASS or CSS styles for both modes, and the browser applies the style the user wants. That’s it! The seamless flow from the operating system to the browser to the website is a huge win for users and developers.

After tinkering with Fediverse, I decided to add light and dark modes to this website as well. I began with some internet research on how to best approach this. This GitHub thread shows the current progress of the feature. And this in-depth POC demonstrates how challenging the process can be.

Posted on

How to Build HTML Forms Right: Security

While many guides to creating forms for the web are mainly focused on the frontend, security goes beyond that. We have to consider the current user, other users, and our own security. As such, we will look at the whole application architecture from frontend to backend and beyond.

Encrypt Traffic (SSL)

Before we get too far, I will be using the term “SSL” to refer to a technology used to encrypt traffic on the internet. Technically, I mean Transport Layer Security (TLS), but “SSL” is commonly used and understood to mean the same thing. It’s what gives websites the little green lock in the URL bar and why they start with “https” instead of “http” (no “s”). 

Posted on

In-memory Automated UI Testing ASP.NET Core

Introduction

In this article, we look at how to run in-memory automated UI tests for an ASP.NET Core web app using Playwright and NUnit. The article provides demo code and solutions to issues found along the way.

Automated UI Testing

Automated testing of any web application is essential to ensure it functions correctly.  On the top of the “testing pyramid” proudly sits UI testing or end-to-end testing, above integration and unit testing.  Automated UI testing involves launching and controlling a browser to drive through a set of interactions that a user would perform.  Assertions are made to see if the web app and browser behave as expected.  Browsers are controlled by testing tools such as Selenium,  Puppeteer, or the new kid on the block, Playwright.

Posted on

Inserting Dynamic Data Into Jekyll Static Sites Using Python or Bash

Jekyll, the static site generator, uses the _config.yml for configuration. The configurations are all Jekyll-specific. But we can also define variables with our own content in these files and use them throughout our website. In this article, I’ll highlight some advantages of dynamically creating Jekyll config files.

On my local laptop, I use the following command to serve my Jekyll website for testing:

Posted on

URL Shortener Complete Tutorial

Introduction

A URL shortener is a service that is used to create short links from very long URLs. Usually, short links have the size of one-third or even one-fourth of the original URL, which makes them easier to type, present, or tweet. Clicking on a short link user will be automatically redirected to the original URL. 

There are many URL shortening services available online, such as tiny.cc, bitly.com, and cutt.ly. Implementing a URL shortening service is not a complex task, and it is often part of system design interviews. In this post, I will try to explain the process of implementing the service. 

Posted on

How to Parse and Standardize Street/Postal Addresses

For any apps or websites that work with addresses, it's necessary for these addresses to be validated and parsed, as well as standardized and verified. There are various mechanisms that are best suited to different projects, so figuring out what you need exactly isn’t always that easy.

What Problems Appear Around Parsing and Standardization?

There are three primary issues that often occur in the parsing and standardization process.

Posted on

A First Look at How To Set Up React 18 Alpha With Snowpack and Vercel

React 18 Alpha With Snowpack and Vercel

If You Prefer Watching a Video...

Be sure to Subscribe to the Official Code Angle Youtube Channel for more videos.

Table of Contents

  1. Introduction
  2. Installation and Set up of React Using Snowpack
  3. Folder Structure
  4. Code Overview
  5. Running the Application
  6. Deployment Process Using Vercel
  7. Conclusion

Introduction

Earlier this month the React Team released some updates concerning the release of React 18. These updates include the following:

Posted on

Moving Perl Mojolicious Routes to Their Own Module

A mentee asked me over the weekend if there was a way within a Mojolicious web application to store the routes separately from the main application class. Here's one way. These instructions assume you're using Perl 5.34 and Mojolicious 9.19 (the latest as of this writing) via the terminal command line on a Linux, Unix, or macOS system; make the appropriate changes if this doesn't apply to you.

First, if you haven't already, create your Mojolicious app at your shell prompt:

Posted on

Running Concurrent Requests With Async/Await and Promise.all

Introduction

In this article, I'd like to touch on async, await, and Promise.all in JavaScript. First, I'll talk about concurrency vs. parallelism and why we will be targeting parallelism in this article. Then, I'll talk about how to use async and await to implement a parallel algorithm in serial and how to make it work in parallel by using Promise.all. Finally, I'll create an example project using Salesforce's Lightning Web Components where I will build an art gallery using Harvard's Art Gallery API.

Concurrency vs. Parallelism

I want to quickly touch on the difference between concurrency and parallelism. You can relate concurrency to how a single-threaded CPU processes multiple tasks. Single-threaded CPUs emulate parallelism by switching between processes quickly enough that it seems like multiple things are happening at the same time. Parallelism is when a CPU has multiple cores and can actually run two tasks at the exact same time. Another great example is this: