Prototype Tree

Anyone who has worked with JS long enough knows something or the other about delegation, prototype chains, dunder proto and other similar things. There are times when I wonder how complex and deep this chaining can be. This past week, however, my curiosity got the best of me and I just had to find the answer for myself.

Making CRA apps work with SSR

This is a multi-post series about how to server-side-render react apps that were built using create-react-app. You can read more about how and why I came up with this below.

Part 1: Off to a simple start I start off simple. A barebones app can’t even deal with css, but helps explain the process involved.

Part 1.5: Amending mistakes Once the base system is up and running, it was time to patch it up. Make it work with css and other stuff.

Part 2: Integrating Redux Redux works great with react. So I had to fit it in. But instead of simply embedding the data. I moved things up a notch.

Part 3: Routing with react-router We’ll explore static and dynamic routing with react-router, along with handling route params and redux integration.

You can read more on this on hackernoon. The code used in the series is here on github.

Stream capturing with MediaRecorder

The new MediaRecorder WebAPI makes media recording super easy. It allows storing chunks of data from a media stream as blobs, which can later be concatenated and saved as a single file. As time passes, more sources of media streams are added. We can capture media from:

• Media Devices
• Canvas
• Media Elements:
  • <video />
  • <audio />

Tiny transfers

It’s hard to pin down why JSON transfers is so popular. But one thing’s for sure, it is not the most efficient when it comes to data transfers.

The nested nature of JSON makes it prone to redundant storage and transferring redundant JSON files only puts strain on the server’s and the client’s bandwidth.

It is always a good idea to deflate your JSON data before transferring to the other side.

The correct blur

In the past week, I learned that the RGB values stored in digital media are not the same as they were recorded. This isn’t some lossy compression algorithm artifact, but rather a clever tactic. The range of all possible intensity values is reduced.

In the days when storage spaces were tiny and these adjustments helped. But the same adjustments can hinder photo editing processes.

Obfuscation with Protext

Obfuscation is the process of making something obscure, unclear, or unintelligible. Obfuscation techniques, such as markup mangling, work great for deterring people from understanding the codebase. Beyond that, mangling serves no purpose for the end user.

Recently, I came across a new and very unique obfuscation technique. One that focuses on the content rendered on the screen, not the underlying code.

Switching to Workbox

Writing a good, healthy, bug-free service-worker script and its installer script is a pretty hefty task. There are multiple pitfalls and they aren’t always visible before time. The worst part is, if something goes wrong, things can get out of hand pretty quickly.

Just watch this talk by Alexander Pope - ServiceWorkers Outbreak.

react-router in Twitter and Pinterest style

Modals are the de facto tool used to show notices and alerts, related content, and the pesky “Please subscribe” requests.

Twitter and Pinterest are two websites that use modals heavily. I’d go as far as to say that they use modals as a central components of their design, and not just some auxiliary tools.

Browser history functioning and loopback gotcha

According to MDN,

The History interface allows to manipulate the browser session history, that is the pages visited in the tab or frame that the current page is loaded in.

But how exactly does the browser keep track of the visited pages?

Animating Dots & Dashes

Using dashed-dotted-lines to create sweet and simple animations.

SSH Into Private Machines

We can use SSH to access remote machines that are:

1. running an SSH server/daemon
2. publicly accessible

But it’s also possible to log into a private machine.

Let’s look at two cases:

1. public -> private
2. private -> private

Docker and DC++

When I first started using Docker, I was unable to use LinuxDC++ (my DC++ client). I kept getting this pesky error.

Connect failed: No route to host

So I did what most of us would do in such a situation: purge and install. Nothing happened.

Then I went to the internet, asking for help. People suggested that there’s something wrong with my firewall config, that my iptables rules were messed up. But that wasn’t the case.

I installed other DC++ clients - EiskaltDC++, Valknut - hoping that there’s something wrong with my original client. But I was let down, yet again.

I thought to myself, maybe I don’t need docker.

Weird phenomenon in Google Trends for ReactJS and AngularJS

Google Trends shows and compares how frequent particular terms were searched for in google. So like, it tells you how popular something is.

Being a JS enthusiast, I wanted to see how ReactJS fairs against AngularJS. This is the trends chart:

Each year since 2013, somewhere around 28th December, AngularJS falls quite a bit. And React goes up by a small, yet increasing, percentage.

As a simple google search didn’t yield any results, I now turn to the community.

Timing Controls - Part 3

This is small one.

In a previous post, we looked at higher order implementations of the techniques discussed in another post.

In this post, we’ll look at requestAnimationFrame.

Timing Controls - Part 2

In a previous post, we looked at some techniques to control the timings of functions (callbacks), triggered when specific events are fired. The techniques are:

1. Debounce
2. Immediate
3. Throttle

In this post, we will see how those techniques can be implemented as a generic API, in the form of higher order functions.

Timing Controls

JavaScript follows the Event-driven programming paradigm. This means that actions can activate reactions. We call these actions events, and reactions callbacks. A continuous flow of events is called an event stream.

The speed at which these actions occur is out of our hand. But we can control when and how to activate the proper reactions. There are some techniques that provide us precise control.

1. Throttle
2. Debounce
3. Immediate

Flowtype and modern JS

As we all know, JavaScript is loose typed - variables are declared without a type. And like everything, not having explicitly mentioned data types had its pros and cons.

One of the advantages is that the development process is much smoother, as JS is much more tolerant towards type mismatches. But that can also be seen as a disadvantage.