antoDev - Yet another place where a developer rants

Obligatory first post

I probably won't update this blog as much, but I felt like I needed someplace to store the occasional experiment as I continue (hopefully 🤞🏻) to learn during my career as a software developer for the web.

So... stay tuned for anything that might come! 🚀

I like my eleventy with a side of SCSS

If you're like me and you cannot stand writing CSS without SASS and you want to enable it for your eleventy site, this is the right place for you.

Coming from the React world I immediately thought of gulp when I decided to include sass in my project, so I jumped at the possibility of using gulp tasks to compile SCSS and add vendor prefixes automatically (I hate them and I google What CSS to prefix?{rel="noopener noreferrer" target="_blank"} almost every day).

Since we're writing gulp tasks I thought a minified CSS would also be a good idea.
So, if you're interested in how I did it, let's begin 💪🏻

What is Gulp?

Gulp is a tool that lets us automate the trivial tasks that frontend web development usually requires like spinning up servers, processing SCSS and optimizing assets like images or even scripts. It also provides hot reloading when developing.

Setting things up

The first thing I did was add the required packages, to my site's directory:

yarn add --dev gulp gulp-autoprefixer gulp-cssnano gulp-sass

As hillonyechekwa pointed out in the comments, you also need to have a sass compiler installed in your project. You can install it with:

yarn add --dev sass

Gulp tasks

To use gulp we need to set up three tasks.

a "css" task to

compile our SCSS files to CSS
add vendor prefixes when required
minify the code

"watch" and "build" tasks to trigger the original "css" task when editing files (watch) or building the site (build).

A gulp task is just a function that gets a name assigned and can be called by Gulp to edit our files.

const gulp = require('gulp')
const sass = require('gulp-sass')
const autoprefixer = require('gulp-autoprefixer')
const cssnano = require('gulp-cssnano')

gulp.task('css', function () {
    return gulp
        .src('./src/css/style.scss') //source file to retrieve
        .pipe(sass()) //sends the source file to the sass plugin
        .pipe(autoprefixer()) //sends the source file to the autoprefixer plugin
        .pipe(cssnano()) //sends the source file to the minifier plugin
        .on('error', sass.logError) //log errors
        .pipe(gulp.dest('./_site/css')) //outputs the result in our public dir
})

gulp.task('watch', function () {
    gulp.watch('./src/css/*.scss', gulp.parallel('css'))
})

gulp.task('build', gulp.parallel('css'))

The watch and build tasks call gulp.parallel() to nest the previous task inside them.

These tasks can be called from the terminal via gulp watch or gulp build.

Run gulp automatically

We don't want to have to run those commands every time we edit our SCSS files, of course. To automate this, we need to add these tasks to our package.json file:

"scripts": {
 "serve": "gulp build & gulp watch & eleventy --serve",
 "build": "gulp build && yarn eleventy"
}

Now, whenever we run one of those two yarn scripts, our gulp tasks will be called before eleventy can parse our site.

Do not be like me...

...and read the eleventy documentation!

When setting up all of this I was stomped for a solid hour trying to figure out why changes to my SCSS files weren't causing the browser to reload.
As it turns out, eleventy does not automatically watch any file in our project's directory, but we can make it do so, by adding this line to our .eleventj.js file:

eleventyConfig.addWatchTarget('src/css/')

Note that eleventy will not add a watch for files or folders that are in .gitignore.
To change that behaviour we need to add another line to .eleventy.js:

eleventyConfig.setUseGitIgnore(false)

...that's it. Now you should have everything you need to compile .scss files! 🚀

Time to start learning how to regex

It's time for me to come out: I've been working as a professional developer for 6 years and I've never managed to write a regex without intense googling and the help of regex 101.

This needs to stop, so I decided to take advantage of the current lockdown and spend my Saturday morning doing some googling, and as it turns out... regular expressions are not that complicated. At all.

Image from garabatokid

After a couple of minutes of googling, I landed on RegexOne and found a great and exhaustive tutorial that takes you through the basics of writing regular expressions.
The lessons are clear and concise and offer real-world examples with a nifty little exercise at the end of each chapter.

It took me about an hour to go through the 15 lessons of the basic tutorial touching everything, from the ABCs to capturing groups.

Once you're done with all the lessons you can take the Practice Problems which are useful tests that push you to write regular expressions that help in a developer's everyday life like:

matching email addresses
parsing HTML elements
extract pieces of information from a log file

... and more.

So, whether you're a seasoned developer or just starting in this world, I highly suggest you try out this tutorial and use Regex101 as a reference and code generator (this utility is very useful!) for more complex regular expressions.

I'll be diving more into this and I'll probably end up writing a follow-up, but for now, I'd say it's been a productive Saturday morning.

Do not use the CSS background shorthand property in React

The problem

I recently came across this bug at work and it took me a minute to figure it out.
What I had was something like this:

<div
    className="image-container"
    style={{
        position: 'absolute',
        top: `${top}%`,
        left: `${left}%`,
        width: `${width}%`,
        height: `${height}%`,
        background: `transparent url(${image_url}) no-repeat center center`,
        backgroundSize: 'contain'
   {{
/>

Everything seems okay, right? Well, in theory.
But as soon as the application started, I noticed that the backgroundSize property was not working!

Let’s get googling

After inspecting the output HTML and a bit of googling, I came across this closed issue on React's Github.

Apparently, using the CSS background shorthand property with a backgroundSize prop causes this last property to be cleared if and when the background property is updated.

Fair enough, let’s fix it

A quick and easy fix is to explicitly set every property by expanding the shorthand property:

<div
    className="image-container"
    style={{
        position: 'absolute',
        top: `${top}%`,
        left: `${left}%`,
        width: `${width}%`,
        height: `${height}%`,
        backgroundColor: 'transparent',
        backgroundImage: `url(${image_url})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: 'contain'
   {{
/>

That's all! I hope this is useful to you 💪🏻

useCallback? I don't know her

Spoiler alert: this is a rant that might turn into something useful. Maybe.

I don’t know React

My React journey has been a constant learning experience, but there’s something about React that has been bugging me lately.

Ever since I changed company last year, I found myself in a new codebase, and with it came something I never saw before: an odd quantity of useCallback in every single component of the app.

I have to admit I was responsible for most of a medium/big react app at my previous company and it always ran smoothly even without this heavy optimization.
Of course, thanks to my beloved impostor syndrome I immediately thought “Oh god, I’m a terrible developer, I don’t know React, I never use memoization”. You know, the usual.

PR Review anxiety

Since I was not familiar with the concept of useCallback, useMemo (and lodash memoize!) I immediately documented myself, but all I could find were articles and tutorials about how to use these hooks and functions, and none of them touched deeply on the dependency array, which is something I constantly screw up!

Lately, I’ve been reading a lot on the use of useCallback and useMemo in a React app (useful links at the end of the post ✏️) because I wasn’t comfortable with my fake it ‘till you make it approach to this part of the framework and what I read was… well, more confusing than ever.

You shall not optimize (blindly)

Performance optimizations are not free. They ALWAYS come with a cost but do NOT always come with a benefit to offset that cost.

Therefore, optimize responsibly.

Kent C. Dodds

Pretty much every article I read said something along the lines of "it’s wrong to optimize before profiling the application and every optimization comes with a cost that can easily outweigh the benefit".

In all the articles and comments on Stack Overflow I could find, pretty much everyone agreed that there are cases where it’s pretty clear that memoization help:

Big, very big lists
Passing down components to optimized children
Referential equality checks in hooks dependencies
Computationally expensive functions (we’re talking prime numbers calculations!)

I’ll stop here, for now.
My goal is to keep digging into this argument and try to profile the application I maintain at work and come up with definitive data on which components actually benefit from memoization and which are actually slower thanks to it.

…stay tuned!

📚 As promised, I’ll leave here the list of articles I read on the subject:

Add comments to your static blog with utterances

A while ago I was looking for a way to add a comment section to my static blog and this is the result of all the googling I did on the subject 💪🏻

Disqus

The first solution I looked into is Disqus, but I soon decided not to use it simply because, while it’s a valid software with a huge community, it has some glaring flaws (at least for me):

the basic plan comes with ads
it tracks its users
if anonymous commenting is turned off, people need to create a Disqus account (more on that later)
it’s way too complex for my needs

Jamstack Comments Engine

Jamstack Comments Engine “… is an example of how a Jamstack site can implement comments.”

Ok, this is not exactly the first search result that comes up when googling “static blog comments”, but I ran into it and considered it simply because, from a developer point of view, it is a very smart approach.

The solution proposed here consists of a combination of Netlify Forms and its Submission API to trigger a new build of the web every time a comment is posted, after it’s approved by a moderator. It additionally explains how to create a Lambda function to get notified on Slack whenever a new comment comes in.

While I found this approach very interesting, I still have a day job and didn’t want to embark on the somewhat long, even though very well documented, process.

utterances

After I gave up on the comments feature (no one reads my two-month-old blog anyway), I stumbled upon utterances and it blew my mind with its simplicity. It took me 10 minutes to add it to this blog, build time included.

This is how the comment section will appear, from utterances homepage.

The perks

Straight from their page:

It’s open source
It doesn’t track users
No ads 👏🏻
All the comments data is stored in GitHub issues
It’s lightweight

So, how does it work?

First of all, it uses GitHub issues to track comments, based on the post title: the first person to comment on a blog post will trigger the creation of a related issue and future comments on the same post will end up in that issue.

Smart, right? 🔮

The only requirements are that the repository connected to the app needs to be public and have the utterances app installed on it.

Users will comment using their GitHub account, which is perfect for a tech/programming blog.

Oh, and it comes with 8 themes that will play well with most of the colour palette of the blogs out there!

How to install it

Their page is pretty straightforward: just follow the configuration steps (repository name, optional label for the issues, chosen theme and even issue title format!) and you’re left with a script tag to add to your blog template:

<script
    src="https://utteranc.es/client.js"
    repo="antoBit/antodev"
    issue-term="title"
    label="💬"
    theme="dark-blue"
    crossorigin="anonymous"
    async
></script>

Note that the issue label supports emojis! 🎉

After that, just remember to install the utterances app on the same repository you provided in the repo attribute and you’re done!

Shameless plug

If you found this post useful and you liked it, why don’t you leave a comment below? I’d like to know what you think about this.

Thanks for reading!

Using the MediaStream Web API to record screen, camera and audio

Lately at work, I had to create an app to let our users record their screen or camera and audio directly in the browser.

While the MDN web docs are well documented, there were a couple of issues I encountered down the road and I had to do quite a bit of googling around, testing some NPM packages and fight off weird browser compatibility issues, so… I thought I would spare the souls of my fellow developers after me 😅

The idea

What I want to achieve here is fairly simple: let the users record either their screen or their camera plus audio and obtain a video of the recording.

Recording the camera and audio is fairly simple since it uses the same API interface to record both devices and we have to work with a single stream.

Recording screen and audio requires us to merge two different media streams from two different APIs, but as you will see this is not that complicated.

Let’s outline what we’re going to do:

Use the MediaDevices interface to capture a MediaStream from the user’s devices
Record the media from the stream using the MediaRecorder API to generate a Blob object containing the recorded data
Create a new Blob from the MediaRecorder data and generate a URL from it to download the video from

Time to write some code

DISCLAIMER: Most of the code here is meant to be used as an example.

In order to keep it as simple as possible, I won’t be worrying about checking if the browser supports the API used in the code (at the time of writing, only Chrome and Firefox do) and so I won’t add any error handling, try/catch statements, etc….

Please don’t put any of this in production, I decline any responsibility in that case 🤣

Camera and audio stream

To record the webcam and the audio from a microphone (either the computer internal microphone or an external one) we can use the MediaDevices interface:

let mediaConstraints = {
    video: {
        width: 1280,
        height: 720,
    },
    audio: {
        echoCancellation: true,
        noiseSuppression: true,
        sampleRate: 44100,
    },
}

async function captureMediaDevices() {
    const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints)
    return stream
}

For simplicity’s sake, I’m keeping the configuration options for the screen capture (the mediaConstraints object) very minimal, but there are quite a few options that can be configured, like the preferred device (useful for multiple webcam or microphone setups), sample rate, volume…

You can find more details here: DisplayMediaStreamConstraints - Web APIs | MDN

Screen stream

To record the user’s screen, be it a browser window, and application or the entire screen, the code is very similar:

async function captureScreen() {
    mediaConstraints = {
        video: {
            cursor: 'always',
            resizeMode: 'crop-and-scale',
        },
    }

    const screenStream = await navigator.mediaDevices.getDisplayMedia(
        mediaConstraints
    )
    return screenStream
}

Note that both examples are asynchronous functions because the MediaDevice interface returns a promise.

Record the streams

To record the stream obtained before we will use the MediaRecorder API:

let recorder = null

async function recordStream() {
    const stream = await captureMediaDevices()
    recorder = new MediaRecorder(stream)
    let chunks = []

    recorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
            chunks.push(event.data)
        }
    }

    recorder.onstop = () => {
        const blob = new Blob(chunks, {
            type: 'video/webm;codecs=vp9',
        })

        chunks = []
        const blobUrl = URL.createObjectURL(blob)

        console.log(blobUrl)
    }

    recorder.start(200)
}

Let’s go through this step by step:

const stream = await captureMediaDevices()
recorder = new MediaRecorder(stream)
let chunks = []

Here we just initialise the stream and the MediaRecorder with an empty chunks array that will contain the recorded chunks of data.

recorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
        chunks.push(event.data)
    }
}

On the MediaRecorder ondataavailable event we tell the MediaRecorder to push the recorded data inside the chunks array.

recorder.onstop = () => {
    const blob = new Blob(chunks, {
        type: 'video/webm',
    })

    chunks = []
    const blobUrl = URL.createObjectURL(blob)

    console.log(blobUrl)
}

The onstop event handler creates a new Blob containing the recorded data stored in the chunks variable and the video/webm mymeType.

After that, a URL is created from the blob and printed to the console. This URL can be used to download the file or upload it to a server.

recorder.start(200)

This final method starts the recording with a 200ms time interval.

Stop the recording

In order to stop the recording and release the user’s devices, we need to call the stop() method on each track of the stream:

function stopRecording() {
    recorder.stream.getTracks().forEach((track) => track.stop())
}

Ok, but what about both screen and audio?

To record both the screen and the audio we need to obtain two separate streams and merge them into one single stream:

const screenStream = await captureScreen()

mediaConstraints = {
    audio: {
        echoCancellation: true,
        noiseSuppression: true,
        sampleRate: 44100,
    },
    video: false,
}

const audioStream = await captureMediaDevices()

const stream = new MediaStream([
    ...screenStream.getTracks(),
    ...audioStream.getTracks(),
])

I’m using the same captureMediaDevices function to capture the audio from the computer by changing the mediaConstraints object.

Then, using the getTracks() method of the MediaStream I’m obtaining every track of the two streams to create a new stream.

The rest of the code is the same as above.

Wrapping up…

This is everything you need to know to get started with media recording in the browser.
The MDN docs are a helpful resource for all the other methods and configurations available.

In a real-world application you would worry about checking the browser compliance with the APIs, stopping and resuming the stream, choosing between multiple devices as well as providing a real-time preview of the stream and/or of the downloaded video, something that you could do like this:

const video = document.getElementById('video')

video.srcObject = stream //to preview the stream

video.src = blobUrl // to preview the finished video

Review the entire code

I set up a small Codepen gist with the entire code from this article, check it out here.

I hope this has been helpful. If you want me to dive into it a little bit more or maybe tackle some real-world examples like choosing between multiple cameras and microphones let me know in the comments below 💪🏻

Share your work with ngrok and localtunnel

Have you ever found yourself wanting to show your work to a client, but didn’t want to setup a server only for that reason? Or maybe you wanted to use the APIs of a particular service, but they didn’t allow localhost as a valid IP address in their access whitelist?

If the answer is yes, then this post is for you.

Ngrok to the rescue!

From ngrok’s official website :

ngrok is a simplified API-first ingress-as-a-service that adds connectivity, security, and observability to your apps with no code changes.

What!? Let’s translate this: ngrok is an application that creates a tunnel between your computer and the internet, solving a couple of the most commons hiccups when developing web applications:

Show someone else your work in progress without having to deploy it to a remote branch and running it on a hosting space
Consume APIs that only accepts secure HTTPS connections (and complain when you try to whitelist localhost!)

Ngrok can be installed in all major operating systems as a standalone service. Its developer license is free (with some restrictions like bandwidth and usage), but it requires the creation of an account.

To install it in MacOS we can use brew:

brew install ngrok/ngrok/ngrok

Instructions for different operating systems can be found in the docs.

But how does it work?

When using ngrok, we can expose a web server on our machine, for example, a Node.js application running on localhost:8000 to the outer world by starting ngrok. The service will create a tunnel between our machine and the internet using a random URL that we can share with other people.

ngrok http 8000

Some of its options and features features

Automated SSL/TLS certificates

Ngrok supports HTTPS out of the box, and we have a couple of ways to set this up.
The easiest way is to specify it as a complete address:

ngrok http https://localhost:8000

Another way to do that is by connecting ngrok on port 443. It will assume by default that we want to use the HTTPS protocol:

ngrok http 443

Custom domains

Custom domains are a paid feature, however, custom subdomains can be configured easily and work with the free plan.

ngrok http --subdomain=antopiras 80

Authentication

Ngrok also supports basic authentication (specify user and password when setting it up), OAuth 2.0 (Google/GitHub account), and other forms of authentication.
We can add authentication with:

ngrok http --basic-auth="username:password" 8080

ngrok http 8000 --oauth google

Use it in your Node.js application

If we don’t want to have to set up and manually start ngrok every time we come back to our laptop or we are looking for a more automated solution, we can use this Node.js wrapper.

const express = require('express')
const ngrok = require('ngrok')

const app = express()
const port = 8000
const NGROK_AUTH_TOKEN = ‘NGROK_AUTH_TOKEN’

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, async () => {
  await ngrok.authtoken(NGROK_AUTH_TOKEN)
  const url = await ngrok.connect(port)

  console.log(`Example app listening on port ${port}`)
  console.log('ngrok tunnel url: ', url)
})

Once we have connected, we can retrieve the ngrok URL and use it inside our application.

An alternative to ngrok

If you find ngrok too complex to use and want an easy and quick-to-use alternative for Node, check out localtunnel:

npm install -g localtunnel //use -g if you want to install it globally on your machine

It’s an NPM package and it is pretty similar to ngrok, but it doesn’t require you to create an account. It also supports subdomains.

To use it in our simple application we just need to change a couple of lines:

const localtunnel = require('localtunnel')

//…

app.listen(port, async () => {
    const tunnel = await localtunnel({ port })

    console.log(`Example app listening on port ${port}`)
    console.log('localtunnel tunnel url: ', tunnel.url)
})

…and that’s it! I hope you found this little guide useful. Leave a comment if you have more questions about this 😄