Bram.us – A rather geeky/technical weblog, est. 2001, by Bram(us) Van Damme

Chromium-based Edge released

Two days ago, Microsoft released their new Edge browser — the one based on Chromium. Apart from a huge change in web features support it also pushes its privacy features – the new “Browser War” – forward.

With this release the version numbering also jumped from 18 to the Chromium version number it is based upon (79 at the time of writing).

Available on macOS, Windows, iOS, and Android.

Download New Microsoft Edge Browser →

ES-Everything: an ECMA Explainer

Matthew Gerstman explaining a lot of terms that evolve around JavaScript: ECMA, TC39, Babel, Polyfills, …

So you Google how to make your app work in IE 10, or 11, or whatever. You’re quickly flooded with acronyms and terms you’ve never heard before ES5, ES6, ESNext, ES2020, TC39, ECMA. What’s a transpiler? People are debating about polyfills and ponyfills; is there a difference?

If you’re overwhelmed, that’s okay, it’s a lot. This article will attempt to cover the entire ecosystem around shipping new-ish JavaScript to older browsers and how the community decides what features get added to JavaScript in the first place; let’s dive in.

ES-Everything: an ECMA Explainer →

Test an IMAP connection with cURL

Today I needed to debug an IMAP problem. I got reports from a user (whose password I recently rotated) that Outlook wouldn’t connect, even though they entered the correct new password. The connection to the server was made, but the login attempt always failed.

As I didn’t want to add the account to my local mail client I resorted to the almighty curl to test the connection. Below is how I did that.

🤬 To jump ahead: Eventually it turned out that the newly entered password in Outlook was correct but that Outlook basically ignores it. The correct way to change a password in Outlook is to go to the Control Panel instead, and change it from there (in a window that is basically the same as Outlook’s). Makes sense … NOT!

Depending of whether you’re using a secured connection or not, use one of these:

Non-secured IMAP connection (port 143):

curl -v imap://user:[email protected]/INBOX?NEW

Secured IMAP connection (port 993)

curl -v imaps://user:[email protected]/INBOX?NEW

After successfully logging in, you should see output similar to this:

Click to expand

*   Trying XXX.XXX.XXX.XXX...
* TCP_NODELAY set
* Connected to domain.tld (XXX.XXX.XXX.XXX) port 993 (#0)
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/cert.pem
  CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES256-GCM-SHA384
* Server certificate:
*  subject: OU=Domain Control Validated; OU=PositiveSSL; CN=domain.tld
*  start date: Sep  4 00:00:00 2019 GMT
*  expire date: Sep  3 23:59:59 2020 GMT
*  subjectAltName: host "domain.tld" matched cert's "domain.tld"
*  issuer: C=US; ST=TX; L=Houston; O=cPanel, Inc.; CN=cPanel, Inc. Certification Authority
*  SSL certificate verify ok.
< * OK [CAPABILITY IMAP4rev1 SASL-IR LOGIN-REFERRALS ID ENABLE IDLE NAMESPACE LITERAL+ AUTH=PLAIN AUTH=LOGIN] Dovecot ready.
> A001 CAPABILITY
< * CAPABILITY IMAP4rev1 SASL-IR LOGIN-REFERRALS ID ENABLE IDLE NAMESPACE LITERAL+ AUTH=PLAIN AUTH=LOGIN
< A001 OK Pre-login capabilities listed, post-login capabilities have more.
> A002 AUTHENTICATE PLAIN dXNlcm5hbWU6cGFzc3dvcmQ=
< * CAPABILITY IMAP4rev1 SASL-IR LOGIN-REFERRALS ID ENABLE IDLE SORT SORT=DISPLAY THREAD=REFERENCES THREAD=REFS THREAD=ORDEREDSUBJECT MULTIAPPEND URL-PARTIAL CATENATE UNSELECT CHILDREN NAMESPACE UIDPLUS LIST-EXTENDED I18NLEVEL=1 CONDSTORE QRESYNC ESEARCH ESORT SEARCHRES WITHIN CONTEXT=SEARCH LIST-STATUS BINARY MOVE SNIPPET=FUZZY PREVIEW=FUZZY NAMESPACE LITERAL+ NOTIFY SPECIAL-USE COMPRESS=DEFLATE QUOTA
< A002 OK Logged in
> A003 SELECT INBOX
< * FLAGS (\Answered \Flagged \Deleted \Seen \Draft)
< * OK [PERMANENTFLAGS (\Answered \Flagged \Deleted \Seen \Draft \*)] Flags permitted.
< * 3270 EXISTS
< * 0 RECENT
< * OK [UNSEEN 3256] First unseen.
< * OK [UIDVALIDITY 1325596071] UIDs valid
< * OK [UIDNEXT 67684] Predicted next UID
< * OK [HIGHESTMODSEQ 68768] Highest
< A003 OK [READ-WRITE] Select completed (0.074 + 0.000 + 0.073 secs).
> A004 SEARCH NEW
< * SEARCH
* SEARCH
< A004 OK Search completed (0.009 + 0.000 + 0.008 secs).
* Connection #0 to host domain.tld left intact
> A005 LOGOUT
< * BYE Logging out
< A005 OK Logout completed (0.001 + 0.000 secs).
* Closing connection 0

A note on usernames

If the username you are testing contains an @, you must use its urlencoded counterpart %40.

Alternatively you can also pass in the username:password combination separately using the -u flag

curl -v -u 'user:password' imaps://mailserver.tld/INBOX?NEW

Did this help you out? Like what you see?
Thank me with a coffee.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face. Thanks!

☕️ Buy me a Coffee ($3)

Squash all Git commits with `git squash-all`

Freek just shared his workflow to squash all git commits into one single commit — Handy for when you’re pushing a first public release of a project. His process involves removing the .git folder and starting off fresh again with a git init.

Wondering if there are handier/shorter ways to achieve this I set off on a Google Search and found some answers as detailed in this StackOverflow thread. Let’s go over the techniques mentioned.

1. Using Orphan Branches

As per Git Documentation:

The first commit made on an orphan branch will have no parents and it will be the root of a new history totally disconnected from all the other branches and commits.

This can be useful when you want to publish the tree from a commit without exposing its full history. You might want to do this to publish an open source branch of a project whose current tree is “clean”, but whose full history contains proprietary or otherwise encumbered bits of code.

After you’ve created the orphan branch, you swap it out the with the “old” master:

# Create a new branch, with no parent commits
git checkout --orphan squashed-master master
git commit -m "🎉 First commit"

# Overwrite the old master branch with the new one
git branch -M squashed-master master

2. Using `git commit-tree`

Creates a new commit object based on the provided tree object and emits the new commit object id on stdout.

The command below will create one commit object using git commit-tree and then reset the HEAD to that commit:

git reset $(git commit-tree HEAD^{tree} -m "🎉 First commit")

Alias it!

Since the git commit-tree method is a git one-liner, you can alias it:

git config --global alias.squash-all '!f(){ git reset $(git commit-tree HEAD^{tree} -m "${1:-🎉 First commit}");};f'

From then on you can just run git squash-all in any repo of your liking:

git squash-all

🙂

I’ve also added this alias to ./freshinstall, a tool which I built to automatically configure macOS (Preferences, Dotfiles, Installed Software, etc)

Pushing your newly created branch

Since you rewrote history, you’ll need to use --force when pushing your newly created branch.

git push --force origin master

Did this help you out? Like what you see?
Thank me with a coffee.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face. Thanks!

☕️ Buy me a Coffee ($3)

Tiny Helpers – A collection of useful online web development tools

Nice new single-purpose site by Stefan Judis, which lists single-purpose web development tools – such as the aforementioned CSS Grid Generator and Smooth Shadow Generator for example – in one single place.

As detailed in a Twitter thread, the site is built using Eleventy, deployed to Zeit, and screenshots of the sites are automatically taken using Puppeteer.

The source is open, so you can add new services by opening a PR 🙂

Tiny Helpers →
Tiny Helpers Source (GitHub) →

Should you self-host Google Fonts?

Google Fonts is great, but it also has a downside: it affects your page’s waterfall (during which some render-blocking may occur, as it involves CSS) as explained by Barry Pollard:

The problem is that your website (say www.example.com) loads the stylesheet from fonts.googleapis.com, which returns some CSS made up of font-face declarations.

This means you have to connect to fonts.googleapis.com, download the CSS, then connect to fonts.gstatic.com to download the actual fonts.

Fonts are often discovered late by the browser when loading a page (as you need to download the CSS to see them) but Google Fonts are discovered extra late, as you need to download the CSS from another domain, then the fonts from a 3rd domain and, as discussed above, making an HTTPS connection takes time.

This post goes really deep into how it all works. Covers things such as rel="preconnect", font-display: swap;, etc.

Should you self-host Google Fonts? →

🔥 Harry Roberts said it before: Self-Host your Static Assets

How to build a React App with Snowpack

Straight to the point video by Ryan Lanciaux on how to use React with the aforementioned Snowpack:

Thanks Ryan, saved me some research!

Snowpack with React: An awesome way to build web applications →

Watch PIP YouTube videos on macOS with `pipcorn`

With pipcorn you can spawn a picture-in-picture YouTube player on your Mac without installing anything!

Install it globally using npm, or run it directly using npx:

npx pipcorn https://www.youtube.com/watch?v=dQw4w9WgXcQ

Basically it’s a wrapper around ytdl (to get the MP4 URL) and open-pip-cli (to open a PIP player).

Love the name, too.

pipcorn Source (GitHub) →

Wombat Dressing Room, an npm publication proxy on GCP

When automating the publishing of an NPM package, 2FA can get in the way, as you can’t really automate entering a 2FA auth code off a cellphone. Enter Wombat Dressing Room from Google:

With Wombat Dressing Room, rather than an individual configuring two factor authentication in an authenticator app, 2FA is managed by a shared proxy server..

You publish to Wombat Dressing Room, and it enforces additional security rules, before redirecting to registry.npmjs.org.

Publishes are made from a single npm account with 2FA enabled (a bot account).

Publishes can be made using the npm CLI, by making Wombat Dressing Room the default registry (npm config set registry https://external-project.appspot.com).

The Wombat Dressing Room is deployed to Google App Engine. They’ve been using it themselves internally for over a year, in case you were wondering if it is “production ready”.

Wombat Dressing Room Introductory Post →
Wombat Dressing Room Proxy Source (GitHub) →

A note on usernames

1. Using Orphan Branches

2. Using git commit-tree

Alias it!

Pushing your newly created branch

2. Using `git commit-tree`