Morgan CUGERONE's latest articles

Today I learned: How to use throw and try/catch blocks in combination with setTimeout

Fri, 24 Oct 2025 00:00:00 +0000

The problem

You should beware when using setTimeout together with throw and try/catch block.

At first sight you may think that the below code is just fine and that it will fail gracefully and proceed with the fallback plan.

Well, not quite.


function willErrorBeCaught() {
  try {
    setTimeout(function callbackFunction() {
      throw new Error('There was a problem');
    }, 3000);
  } catch (error) {
    console.warn('There was a problem');
    
    // Placeholder for fallback implementation
  }
}

willErrorBeCaught();

The above code produces an "Uncaught Error: There was a problem".

The reason is that, by the time the callbackFunction function is executed, i.e. after at least 3 seconds, the willErrorBeCaught function will have already been removed from the call stack. This makes its catch block code unreachable, and thus, the error uncaught.

This is indeed stated in the MDN docs:

Execution of the current function will stop (the statements after throw won't be executed), and control will be passed to the first catch block in the call stack. If no catch block exists among caller functions, the program will terminate.

The solution

The solution is rather simple. Shift the try/catch block into the callbackFunction function, as show in the code snippet below.


function willErrorBeCaught() {
  setTimeout(function callbackFunction() {
    try {
        throw new Error('There was a problem');
    } catch (error) {
      console.warn('There was a problem');
      
      // Placeholder for fallback implementation
    }
  }, 3000);
}

willErrorBeCaught();

Now upon throw the "control will be passed to the first catch block in the call stack" which is the one from the currently executed function, i.e. callbackFunction.

Reference

Using Orca to Evaluate Web Accessibility

Fri, 18 Jul 2025 00:00:00 +0000

This guide is profoundly inspired from WebAIM's "Using VoiceOver to Evaluate Web Accessibility" article, but applied to Orca's screen reader. It deliberately follows the same content structure, as WebAIM offers a very well structured article that, in my opinion, fits the basic needs of a Web professional who aims at testing their User Interfaces with a screen reader under a Linux GNOME desktop environment.
Moreover, I could not have come up with a smarter structure to be very honest.

Article content

Introduction

Orca is a free, open source, flexible, and extensible screen reader that provides access to the graphical desktop via speech and refreshable braille.

Orca is available on Linux and is being continuously developed as part of the GNOME project.
It comes out of the box with Ubuntu!

While reading this article, keep a few things in mind:

This article does not contain a comprehensive list of Orca shortcuts. It does provide a list of the essential commands that new or novice Orca users should know. For a more comprehensive list of Orca keyboard shortcuts, see the Orca's commands page from Orca Screen Reader documentation. The Orca Getting started guide is also available.
If you are new to screen readers, plan on spending some time (perhaps several hours) becoming comfortable using Orca. Don't get discouraged if things still seem confusing after only a few minutes. Slow down the reading speed and take your time.
While Orca works with Web browsers, including Firefox and Chrome/Chromium that support the Assistive Technology Service Provider Interface (AT-SPI), which is the primary assistive technology infrastructure for Linux and Solaris, this guide will primarily focus on using Orca with Firefox under Ubuntu as according to latest "WebAIM's screen reader survey" from 2024, Firefox is the browser that is most commonly combined with Orca.

Getting started

There are few methods to start (or stop) Orca.

The simplest way is to use the key binding Super+Alt+S.
The Super key is an alternative name for what is commonly labelled as the Windows key or Command key on modern keyboards.

The more tedious way, but that may offer load-time options, is to type orca, along with any optional parameters, in a Terminal window or within the Run dialog and then press Enter.
To stop it when using the Terminal window, press Ctrl + C.
To stop it when using the Run dialog, launch the Run dialog again, type killall orca and the press Enter.

The Orca Modifier key, called Orca key and later denoted as Orca in this page, can be among the following:

Numpad 0 referenced as "KP_Insert" in the settings
Insert
Insert, Numpad 0
Caps Lock referenced as "Caps_Lock" in the settings

Which key the Orca Modifier is bound to will, by default, depend on whether you are using Orca's Laptop keyboard layout or its Desktop keyboard layout.
This article will only focus on Laptop keyboard layout.
The Desktop keyboard layout key bindings can be found Orca's screen reader documentation.

While working in Orca, keep the following in mind:

Orca currently functions best with Firefox. Orca works with Chrome/Chromium, but some errors may be introduced. Orca can also access applications including such as LibreOffice. This article will only focus on accessing web content with Firefox.
Remember that screen reader users typically do not use a mouse. As you become more comfortable with Orca, try using only the keyboard.
Most browser shortcut keys will work when using Orca.

Configure Orca

Configure Orca modifier key

If you will to configure the Orca modifier key,

Access the "Screen reader preferences" dialog. To bring up this dialog, execute orca -s from your Terminal or the "Run dialog".
Move to the "Key Bindings" page
Move to the "Screen Reader Modifier Key(s)" combobox
Select the desired modifier from the combobox options.
Press the "Apply" button.

These keys are used to access special Orca commands and functions and will be referenced simply as Orca in this pages onward.

For example Orca + Space, which equates to Insert + Space, if Insert is configured as the Orca modifier key, will open Orca preferences dialog.

Configure Orca voice

Now that you will be spending time using it, you would better set an Orca voice preference. To do so, open the "Screen reader preferences" dialog and move to the "Voice" page, and then configure to your liking.

Be it that you are not content enough with the set of voices available, you may consider researching online for others that can be used by Orca.

You may consider RHVoice, a free and open-source multilingual speech synthesizer compatible with Orca.
Refer to "Using RHVoice on Linux" to set it up on your linux machine. After you reboot and return the Screen reader "Voice" preferences you should be able to pick "rhvoice" from the "Speech synthesizer" combobox.

In the list below are other voices options you can explore:

Voxin ($20 in average per voice): An easily installable add-on which provides text-to-speech to blind users of GNU/Linux. It offers many proprietary voices in many languages, many of which sound very good. Some may recognise Samantha, the default VoiceOver voice.
Piper (Free): Set of voices that are quite realistic, generally too slow for screen reader use, although it seems to work well for some as this "Use the Orca Screen Reader with Piper" gist testifies.

Reading

There are dozens of keyboard shortcuts that allow you to read web content.

The following is a list of essential reading shortcuts. With these shortcuts, you should be able to read through most web content with Orca.

Orca + ;: Start reading at current position (also know as "Say all")
Orca + Shift + ↑: Speak current selection
←/→: Move and read Previous/Next character
Ctrl + ←/→: Move and read Previous/Next word
↑/↓: Move and read Previous/Next line
Orca + /: Present the title bar
Orca + V: Toggle verbosity level ("brief" or "verbose")
Orca: Stop reading
Orca + S: Turn speech on and off. Extremely convenient as it sits half-way between "Stop reading" and "Stop Orca". It prevents Orca from "speaking" along all your moves and actions (e.g.switching window/application or operating your keyboard).

You may want to practice reading through the content on this page with Orca right now.

Navigation

Sighted users visually navigate through web content in a number of ways. They skim for headings, lists, tables, etc. Most of these methods are available to Orca users if the web page is correctly structured and well organised.

There are several single-key shortcuts to quickly navigate by common page elements.

Single-key navigation shortcuts

There are several single-key shortcuts to quickly navigate by common page elements. Orca offers this feature through its "Structural navigation" mode.

To use this mode, you first you need to switch it on with:
Orca + Z.

These single-key shortcuts include:

Tab: Links and form controls
H: Headings
1 - 6: Headings level 1-6
F: Form controls
B: Buttons
C: Combo boxes
E: Entries i.e. Text inputs
R: Radio buttons
X: Checkboxes
T: Tables
K: Links (mnemonic: Link ends with K)
U: Unvisited link
V: Visited link
G: Graphics i.e. Images
L: Lists
I: Items in a list
P: Paragraph
B: Blockquote
M: Landmarks (mnemonic: M like Mark)
S: Separators

Tip:

Shift + any of these keys will allow to navigate in reverse.
Shift + Alt any of these keys brings up a dialog with the list of all items of type (e.g. all Headings, all Headings of level 2, all Links...).

Other navigation shortcuts

Orca + [: Open the Find dialog
Orca + ]: Search for the next instance of a string
Orca + Ctrl + ]: Search for the previous instance of a string

Images

An image's alternative text will be read by Orca. If alternative text is not defined, Orca will typically ignore it, except in some cases where the image has a function (e.g. image is a link).

WebAIM put together an Image examples and practice page that you can use and explore with Orca. Note that this page is branded for VoiceOver but its content is as relevant for Orca than it is for VoiceOver.

Data Tables

To navigate to the next table in a page, press the T. To navigate within a data table, hold down Shift + Alt + an arrow key to go to the adjacent cell according to direction dictated by the pressed arrow key. If a table has proper row and column headers, they will be read automatically while navigating.

WebAIM put together a Table examples and practice page that you can use and explore with Orca. Note that this page is branded for NVDA but its content is as relevant for Orca than it is for NVDA if you skip the "Data tables" section that mentions shortcuts relevant to NVDA only.

Other Data Tables navigation shortcuts

Orca + F11: Toggle cell/row reading
Shift + Alt + Home: Go to first cell in table
Shift + Alt + End: Go to last cell in table

Forms

When a form control gets keyboard focus, its label is read by Orca, and then the type of form control. If a group of form controls—typically groups of checkboxes or radio buttons—is contained in a fieldset with a legend, Orca presents items in a fieldset as a group and reads the legend when you first navigate to anything within the group.

Use the following browser keyboard controls to interact with form controls:

Tab and Shift + Tab: Navigate forward/backward through form controls.
Space: Select and deselect checkboxes.
↑/↓: Select from a group of radio buttons.
↑/↓ or the first letter of an option: Select an option in a combo box
Enter: Submit a form

WebAIM put together a Form examples and practice page that you can use and explore with Orca. Note that this page is branded for NVDA but its content is as relevant for Orca than it is for NVDA.

Focus and Browse modes

Since screen readers use many of the keys on the keyboard for quick navigation, filling in a form or interacting with a widget presents a dilemma. For example, when pressing H, how does a screen reader know if you want to navigate to the next heading or enter the letter into a textbox?

Orca takes care of this by switching between two "modes." "Browse mode" is the default mode for reading and navigating the page—the mode where H takes you to the next heading. "Focus mode" passes almost all keystrokes on to the browser—the mode where H puts the letter H in a text box.

Orca will automatically turn on focus mode when you use structural navigation commands to navigate to a form field. For example, pressing E to move to the next entry would move focus there and also turn focus mode on so that your next press of E would type an “e” into that entry.
In order to start or stop interacting with the focused form field, use Orca Modifier+A to switch between browse mode and focus mode.

Practice

Take the current page, apply your some of your learnings. For example:

Switch Orca on
Listen
Tell Orca to stop reading
Start reading at at current position
Turn off speech
Turn on speech
Present the title bar
Use Orca + Z to switch to structural navigation
- Navigate forward by headings (either H or 1 - 3)
- Navigate backward by headings (either Shift + H or 1 - 3)
- Navigate forward and backward by items of others types e.g.:
  - links (K, Shift + K)
  - paragraphs (P, Shift + P)
  - list (L, Shift + L)
  - landmarks (M, Shift + M)
  - ...
- Go navigate and interact with WebAIM's example pages:
Switch Orca off
Turn off the monitor and repeat some of these tasks.

References and resources

How to mock `console.error` or other `console` methods with Jest

Tue, 01 Jul 2025 00:00:00 +0000

Today a quick one I tend to always hunt into older code I authored to remember how to do it. So to serve my future self as well as benefit the community, here is how one can mock console methods with the Jest testing framework.

Let's go over an hopefully straight-forward example that mocks the console.error method:

describe('My super duper component', async () => {
  let consoleErrorSpy;

  beforeEach(() => {
      errorSpy = jest.spyOn(global.console, 'error').mockImplementation(() => {});
      // Hint: It could work without the `.mockImplementation...` part but
      // your Jest run output would be cluttered with the errors printed out.
  });

  afterEach(() => {
      errorSpy.mockRestore();
  });

  it('logs an error if the wrapper is `undefined`', () => {
    mySuperDuperComponent(/* missing `wrapper` argument */);

    expect(errorSpy).toHaveBeenCalledTimes(1); // i.e it has been called once
    expect(errorSpy).toHaveBeenCalledWith('Could not init super duper component. Wrapper not found.');
  });

  // ...
});

For the other console methods, just swap error and Error with their equivalent (e.g. warn and Warn, log and Log...).

Make your 'Script error.' issues more insightful in Sentry

Wed, 18 Jun 2025 00:00:00 +0000

Context and problem

For quite some time we had our Sentry monitoring capturing the following very unperceptive error:

Event ErrorEvent captured as exception with message Script error.

Eventually I landed on this rather comprehensive Sentry answers article: What is "Script Error"?.

According to the article...

“Script error” is what browsers send to the onerror callback when an error originates from a JavaScript file served from a different origin (different domain, port, or protocol).

The article gives the recommendation of using crossorigin="anonymous" on the script that originated the error.

The problem is that the exception captured in Sentry has absolutely no reference to the culprit script, leaving us clueless on how to address the issue.

Vision of an improvement

The obvious improvement would be to be provided with the name of the culprit script.

At best, to be pointed at the line, in that script, that originated the unhandled exception.

A solution

Experimenting with the window.error callback presented in the article, I was able to log the url argument that revealed the chased script.

Now, it was a matter of figuring out how to tell Sentry to let us send them a better formatted error message, that would include the clue about which script is the culprit, as well as some insight how to get even more details.

This is how I made it all work...

First, in the configuration passed to the Sentry.init() function call, make sure to include within the ignoreErrors array the string: 'Script error.'. That basically tells Sentry to ignore this error all together.

Secondly, where appropriate in your use case, include a window.onerror callback definition like the one below:

/**
 * Customises specific error before capturing to Sentry. It aims at providing
 * more insights than what the default Sentry capture would do for such errors.
 *
 * The parameters are the one provided by the `window.onerror` callback.
 *
 * @param {string} message Error message.
 * @param {string} url URL of the script which threw the exception.
 * @param {object} [error] Error being thrown.
 */
function addSentryOverrides(message, url, error) {
  // Warning: For this to work, 'Script error.' should be added to Sentry.init
	// `ignoreErrors` list.
	if (error === undefined && message && message.includes('Script error.')) {
		const formattedMessage = `Unhandled exception in script ${url}. Hint: Add \`crossorigin="anonymous"\` on the script tag to know the type of error and the position of the error`;

		const scriptError = new Error(formattedMessage);
		scriptError.name = 'ScriptError';

		Sentry.captureException(scriptError);
	}
}

window.onerror = function (message, url, _line, _column, error) {
	addSentryOverrides(message, url, error);
};

Testing out the solution

In order to test out this solution, I created a temporary script over at Static Save that looks like this:

function foo() {
  bar();
}

When calling foo() this should blow up as bar() is not defined.

Now let's use this...

After loading the page I use for the test; in the developer console, I went ahead and appended the temporary script programmatically as below:

var culpritRemoteScript = document.createElement('script');

culpritRemoteScript.setAttribute('src','https://temp.staticsave.com/68525ff025b09.js');
document.body.appendChild(culpritRemoteScript);

I then executed the below snippet in order to trigger the exception upon a user click interaction.

// Clicking the Home link will generate an Unhandled exception
document
  .querySelector('[data-test="home-link"]')
  .addEventListener('click', function clickEventHandler(event) {
  event.preventDefault();
	foo();  
});

Now, as soon as we click the "Home" anchor link, the foo() function will be called, what in turns will be caught into the window.error callback defined previously, what would finally capture the following exception in Sentry:

ScriptError
Unhandled exception in script https://temp.staticsave.com/68525ff025b09.js. Hint: Add crossorigin="anonymous" on the script tag to know the type of error and the position of the error

This is much more insightful, isn't it?

Sentry benefit from following the provided hint

Taken that we follow the "Hint" of adding the crossorigin attribute to the remote script, Sentry seems to capture the exception beautifully, in the sense that, it turns into the following error message and stack trace

Message:

ReferenceError
bar is not defined

Strack trace:

ReferenceError: baz is not defined
at bar(/68525ff025b09.js:2:3)

As you can see it now reveals quite some insights: the error type, the script filename, and the position of the statement that threw the exception.

We are therefore better equipped to go and fix that bug.

Sharing is caring

I spent quite some time in researching how to address this inconvenience, as well as, crafting this solution.

I therefore hope that, if you find yourself in this situation, your path will cross this blog post and that it will fit to your need and make your day brighter 😉.

If you find any problem with the proposed solution and/or have a better approach, do not hesitate to reach out. So far this is the best one I think of.

Today I learned: Jest used with JSDOM as environment does not support navigation, full stop!

Mon, 05 May 2025 00:00:00 +0000

TL;DR

JSDOM does not support Navigation to different pages.

Context

I use the Jest testing framework, configured to use JSDOM as environment.

After failing to write a test that asserts clicking on a link would navigate to a new page, I spent hours researching for a solution. That was only to realised it is mission impossible. Jest is not to blame though!

At this point, to be very honest, the only one to blame may be me. Indeed what I was trying to does not make so much sense as the navigation in my use case is not instructed by Javascript but through the default behaviour of HTML anchor links.
I believe I got trapped by the fact that in the past, I mapped some mouse and keyboard interactions in Jes. These though only involved changes to be asserted onto the current page and therefore made sense and were functioning.

In case you are using Location.assign(url) in your implementation, you may be interested into reading Ben Ilegbodu's post: Mocking window.location methods in Jest & jsdom. It is a use case worth a cover in your tests suite.

Learning

Crawling through loads of Github issues, Stackoverflow threads and blog posts... I landed on the JSDOM documentation which mentions it "does not handle navigation", full stop.
It explains that clicking a link will change nothing, i.e "there will be no new Window or Document object, and the existing window's location object will still have all the same property values".

This confirms we cannot assert a link click default behaviour because the way to do that would have been to check for the value of window.document.location.href, but it won't change!

Conclusion

JSDOM is not a Web Browser nor a Web driver and therefore has no primary interests on implementing Navigation. It emulates the DOM, what implies the current Document Object Model. Although it is also used for scraping websites, it expects its consumers to direct it to the pages to be scraped rather than offer crawling/navigation support. It's fair!
In the JavaScript ecosystem, PhantomJS is better suited candidate for such use cases.

Reference

jsdom/jsdom: A JavaScript implementation of various web standards, for use with Node.js

Today I learned: How to use a Sass variable within a CSS property (a.k.a variable) value

Fri, 04 Apr 2025 00:00:00 +0000

In order to do that, you need to interpolate the Sass variable, using the #{$your-sass-variable-name} notation.
This may not be enough if the Sass variable contains quotations marks.

In some instance you should combine the previous notation with the meta.inspect() function in order to preserve the quotes.

Here are examples of the both variants:

$accent-color: #fbbc04;
$font-family-monospace: Menlo, Consolas, "Courier New", monospace;

:root {
  --accent-color-right: #{$accent-color};
  --font-family-monospace: #{meta.inspect($font-family-monospace)};
}

Source: Breaking Change: CSS Variable Syntax on sass-lang.com

Today I learned: How to append the parent selector at the end of a Sass rule declaration

Fri, 04 Apr 2025 00:00:00 +0000

Heads up

Regarding the below examples... Of course this approach sounds over-engineered, but here, the purpose is educational, and therefore using simple examples to demonstrate the Sass language capability seemed appropriate.

Base design

Let's take the simple below Sass declarations:

.sidebar {
  .cta {
    background-color: teal;
    color: white;
  }
}

At this point, all Call To Actions (a.k.a CTA) from the sidebar have a background of teal and a text color of white.

The CSS output for this is:

.sidebar .cta {
  background-color: teal;
  color: white;
}

"Power users" design

Now let's say that you have "power users" who should, by design, experience an alternative branding for these sidebar CTAs.

In order to customise various elements and components in the page, it has been decided to position a power-user CSS class on the highest page element, i.e the <html> tag.

To add to that; you want to keep the override of the branding close to its original definition in your Sass file.

This is where you need to append the parent selector, from within a nesting block, with the .power-user selector. You can achieve that using Sass' @at-root at-rule.

Now let's revisit our example from above and add the custom "power user" branding.

.sidebar {
  .cta {
    background-color: teal;
    color: white;

    @at-root .power-user #{&} {
        background-color: orangered;
    }
  }
}

The CSS output for this is:

.sidebar .cta {
  background-color: teal;
  color: white;
}
.power-user .sidebar .cta {
  background-color: orangered;
}

Et voilà! You get the .power-user .sidebar .cta {} rule you were aiming for.

Reference

Today I learned: How to use .env files natively with Node.js

Tue, 01 Apr 2025 00:00:00 +0000

Since Node.js 20 you can specify --env-file arguments.

This may cover most of your needs and we may not need the cumbersome npm config set script-shell "/bin/bash"; source ./.env; prefix to your node commands anymore or even this extra dotenv library you may have dropped into your project's dependencies.
I use "may", because it seems that dotenv features are wider than the native --env-file so beware if you have a sophisticated usage of the dotenv library.

According to Node.js' documentation, --env-file argument...

loads environment variables from a file relative to the current directory, making them available to applications on process.env.

The environment variables which configure Node.js, such as NODE_OPTIONS, are parsed and applied.
If the same variable is defined in the environment and in the file, the value from the environment takes precedence.

You can pass multiple --env-file arguments. Subsequent files override pre-existing variables defined in previous files.An error is thrown if the file does not exist.

Here is an example command, using multiple --env-file arguments:

node --env-file=.env --env-file=.development.env index.js

The --env-file-if-exists flag superclass --env-file in the sense that it first checks for file existence.

Today I learned: How to access an array item in a Handlebars template

Mon, 31 Mar 2025 00:00:00 +0000

To access an item of an array outside of a each block helper, for instance, may not be as a straightforward guess for JavaScript developers, as the notation is a little bit odd.

Taken the context data of:

{
  supportFolks: [
    {
      fullname: 'John Doe',
    },
    {
      fullname: 'Clark Kent'
    }
  ],
  fullnames: [
    'John Doe',
    'Clark Kent'
  ]
}

You can access the supportFolks array items individually as below:

Monday colleague on support is {{supportFolks.[0].fullname}}
Tuesday colleague on support is {{supportFolks.[1].fullname}}
...

what is equivalent to:

Monday colleague on support is {{supportFolks.0.fullname}}
Tuesday colleague on support is {{supportFolks.1.fullname}}
...

Note: Beware though with the ladder. Indeed, if the entry is a non-object value, you cannot just call fullnames.0 and expect it to work. You would have to go with fullnames.[0].
For that reason I would not recommend using the non-square-bracket expression as this may lead to confusions down the line.

You may not need Vim relativenumber option after all

Fri, 28 Mar 2025 00:00:00 +0000

Notice

Vim relativenumber option is very popular and admittedly very seducing. So I believe this post may be controversial although this is absolutely not its intent. So please approach it with an open mind, thank you.

What is Vim relativenumber option

According to Vim's help, relativenumber option:

Show the line number relative to the line with the cursor in front of each line. Relative line numbers help you use the |count| you can precede some vertical motion commands (e.g. j, k, +, -) with, without having to calculate it yourself. Especially useful in combination with other commands (e.g. y, d, c, <, >, gq, gw, =).

As I before told, this sounds very seducing!

Drawback

So where is the bitter in this sweet nifty feature you would ask?

Firstly, looking at the margin, i.e in front of each line, to get a number to inform your vertical movements may be a form of distraction almost as big as grabbing your mouse to move the cursor.

Secondly, vertical motion commands used in combination with the relativenumber do not qualifies as Vim jumps and therefore do not feed the Vim jump list.

According to Vim's help, a jump is:

A command that normally moves the cursor several lines away.
If you make the cursor "jump", the position of the cursor before the jump is remembered. You can return to that position with the '' and `` commands, unless the line containing that position was changed or deleted.

'' and `` commands only let you move back and forth between last and current position, but to navigate beyond these 2 positions in the jump list the Ctrl + o and Ctrl + i commands exists to navigate respectively backward and forward through the list. Convenient isn't it?

Once this convenience mapped into your muscle memory you are up to some very efficient Vim editing experience. I though agree this requires practice, but as most of things in Vim.

Using relativenumber option, you miss the opportunity to benefit from this Vim convenience and key feature.

Finally, if you happen to do some pair-programming, relativenumber can reveal super disorienting for your pair when the line numbers in the margin keep updating as you are moving the cursor vertically.
You may end up turning off the option, but you are then left with absolute line number and feel hindered because you mapped your brain and muscle memory to use relative line number.

What should you do/learn doing instead?

Populate and navigate the jump list

At this point you may have understood that you should favour using Vim vertical motion commands that qualifies as jumps and therefore populate the jump list.
Remember this has the added benefit that you can navigate these jumps with Ctrl + o and Ctrl + i motion commands that respectively jump backward and forward the jump list.

Now you may be asking what are these qualifying commands?

Here is the list, with some attempt to provide a useful description of what they do:

Note that there are mentions of Vim marks below and that we will expand on these in the next section.

'x: Jumps to line of Vim mark x; x being any character to be used as marks
`x: Jumps to position (line and column) of Vim mark x; x being any character to be used as marks
G: Jumps to the last line of the current buffer
nG: Jumps to the nth line of the current buffer
/foo: Jumps to first forward match of "foo" pattern
?foo: Jumps to first backward match of "foo" pattern
n and N: Jumps to next and previous match of the work under the cursor
%: Jumps to pairing item of a pair (i.e. {}, ()...)
( and ): Jumps backward and forward through sentences
{ and }: Jumps backward and forward through paragraphs
:s: Jumps to the last location of a substitute command
:tag myTag: Jump to the definition of "myTag" tag
H: Jumps to the Highest (i.e first) line of the window's visible text
nH: Jumps to the nth line from the top of the window's visible text
M: Jumps to the line in the Middle of the window's visible text
L: Jumps to the Last (i.e bottom) line of the window's visible text
nL: Jumps to the nth line from the bottom of the window's visible text
[[: Jumps to the previous section (i.e previous opening curly brace in the first columns)
]]: Jumps to the next section (i.e next opening curly brace in the first columns)

Note: Beware, ]] and [[ keymaps can be overridden by plugins and not count as jumps (e.g. with nvim-markdown plugin, and therefore in Markdown files).

Another field of possibilities offers to you if you consider Vim plugins. Indeed, there are some kind enough to maintain the jump list for you.

For instance telescope.nvim's builtin.current_buffer_fuzzy_find function, that you can use to fuzzy search terms within a Vim buffer.
Indeed, if you jump to the match, it updates the jump list accordingly, and therefore if you use '', `` or Ctrl + o, motion commands, it jumps back to the position the cursor was prior to the search. Nifty!

Use the change list commands

According to Vim's help:

When making a change the cursor position is remembered. Two commands can be used to jump to positions of changes...

g;: Jumps to position of last change
g,: Jumps to position of next change

This is yet another convenient feature to learn to master.

Use Vim marks commands

If you are not familiar to Vim marks I would highly recommend to have a read through Vim Fandom's "Using marks" entry.

Assuming you are now familiar to these, let's dig in and see what is in this for you to move away from using Vim relativenumber option.

It is possible to navigate between lowercase marks, a.k.a local (to current buffer) marks:

]': Jumps to next line with a lowercase mark
[': Jumps to previous line with a lowercase mark
]`: Jumps to next lowercase mark position (line and column)
[`: Jumps to previous lowercase mark position (line and column)

The above commands take a count. For example, 5]` jumps to the fifth mark after the cursor. This may be mentally taxing, so use this only if you are well equipped to carry this overhead.

Some more useful Vim marks commands:

`.: Jumps to position where last change occurred in current buffer
'': Jumps back (to line in current buffer where jumped from)
``: Jumps back (to position in current buffer where jumped from)
`[: Jumps to the beginning of previously changed or yanked text
`]: Jumps to the end of previously changed or yanked text
`<: Jumps to the beginning of last visual selection
`>: Jumps to the end of last visual selection

Practical use of Vim marks

Here are 2 valuable hints I distilled from this great "Practical uses of marks" blog post that you may also find supportive.

Marking important sections (e.g. configuration section, reference links section, key sections of code to jump back and forth from/to)
Copying between distant parts of a file by setting a mark at the source (e.g. ms), then moving to the destination and yanking from the mark (e.g. y`s).

Capitalise on your learnings by combining marks and jumps beyond the edges of your current buffer

Once again distilled from the great "Practical uses of marks" blog post and applicable beyond the scope of your current buffer, here are 3 nifty tips:

Set marks at key points in your workflow, then use jumps to navigate between these points and other parts of your file or project.

Use uppercase marks to jump between files, and then use Ctrl + o to return to your previous position.

Create a "breadcrumb trail" through your code by setting sequential marks (e.g., ma, mb, mc) and then use jumps to move along this trail.

Conclusion

Diving myself into the research to alternative options to using Vim's relativenumber option I came across a myriad of options and opportunities to forge, I think, a more efficient Vim editing experience.

I am at the starting point of this learning journey and very excited by the field of possibilities.

I hope this excitement and opportunity to become more efficient propagates to you, or that you at least pick up a few Vim tricks you did not know about along the way.

Resources

Vim's help (from within Vim :help searchTerm, e.g :help jumps)
Vim Fandom's "Using marks" entry
"Practical uses of marks" blog post

How to open Firefox Developer Edition from the command line on Mac OS

Fri, 30 Sep 2022 00:00:00 +0000

As this took me some Duck Duck Going to figure out how to open Firefox Developer Edition from the command line, I felt I needed to share it here.

Hopefully it will now high rank in search engines results for the next one doing the search (it could be my future self!).

Without further ado, here it is:

open -a "Firefox Developer Edition"

Swap, Firefox Developer Edition with any other browsers name (e.g. Safari, Firefox, Chrome, Brave?) and that should do, I assume.

Add the site or the file name you desire to open as the following argument and it may open it directly.

open -a "Firefox Developer Edition" http://www.duckduckgo.com

open -a "Firefox Developer Edition" index.html

That's all folks! Cheers!

My testing with Jest takeaways

Sun, 29 May 2022 00:00:00 +0000

Takeaways

Test files (i.e suites) are run in parallel unless you use the --runInBand (in short -i) option.
Tests within a file are always run sequentially (in series).
A tests file is first parsed to collect tests, this is the collection phase.
Tests are run in the order they were collected.
describe is a good mean to organise the code BUT also influences the scope of the setup/teardown functions like beforeAll(), beforeEach(), afterAll(), afterEach()
In a describe, beforeAll() and afterAll() are executed respectively before and after ALL of the tests collected from this describe block and all its nested describe blocks.
In a describe, beforeEach() and afterEach() are executed respectively before and after EACH of the tests collected from this describe block and all its nested describe blocks.
BEWARE, any code line inside of describe that is not part of a setup/teardown function nor a test (aka it) block, is executed during the collection phase, so avoid instructions for cleaning in there as they will be executed before the first test is run, what may not be of your intent
There is ONE instance of a global variable per Test file (e.g one JSDOM instance), shared across all the tests within the tests file.
Same goes with a mocked module, so make sure that you call your reset functions such as mockClear(), mockReset() either in a setup/teardown function or at top/end of each tests if you prefer that style

Reference

CSS Media queries media types and features cheatsheet

Fri, 21 Jan 2022 00:00:00 +0000

Media types

Reference page for media types

all
print
screen

Media features

Standard media features

Reference page for standard media features (worth while clicking because some are new or deprecated…)

any-hover
any-pointer
aspect-ratio
color
color-gamut
color-index
device-aspect-ratio
device-height
device-width
display-mode
forced-colors
grid
height
hover
inverted-colors
monochrome
orientation
overflow-block
overflow-inline
pointer
prefers-color-scheme
prefers-contrast
prefers-reduced-motion
resolution
scripting
update
width

Microsoft Media features:

Reference page for Microsoft media features

-ms-high-contrast

Mozilla Media features:

Reference page for Mozilla media features

-moz-device-pixel-ratio
-moz-os-version
-moz-touch-enabled
-moz-windows-glass

Webkit Media features:

Reference page for Webkit media features

-webkit-animation
-webkit-device-pixel-ratio
-webkit-transform-2d
-webkit-transform-3d
-webkit-transition

Other resources

Workarounds to Git worktree using bare repository and cannot fetch remote branches

Fri, 14 Jan 2022 00:00:00 +0000

Context

This post echoes to an inefficiency I faced after adding Git worktrees to my workflow in the manner described in How to use git worktree and in a clean way.

The issue

After a while using git worktrees and willing to add a worktree based upon a remote branch from origin, I discovered that I just could not.
It was very frustrating.
A bit of googling helped me to identify the root cause.

The root cause

The root cause, does not come down to the use of Git worktrees, but rather to the way I use them.

Indeed, I use Git worktrees in combination of bare repositories.

I discovered, as described in the Git documentation about making a bare repository, that when using git clone with the --bare option:

neither remote-tracking branches nor the related configuration variables are created.

That basically means that when you try to git fetch from your remote (e.g origin), the remote branches are not downloaded.
The reason for this is that the configuration of the repository does not get populated with the remote.origin.fetch property at the clone operation.

A short-term workaround

In the repository's directory, open up your $GIT_DIR/config file (e.g. .git/config or in my case .bare/config) and add a new line under [remote "origin"]:

fetch = +refs/heads/*:refs/remotes/origin/*

In the event you do not fancy editing manually the configuration file you can also run the following command:

git config remote.origin.fetch "+refs/heads/*:refs/remotes/origin/*"

Below is an excerpt of the configuration file with the remote.origin.fetch property correctly configured:

[remote "origin"]
    url = …
    fetch = +refs/heads/*:refs/remotes/origin/*

Now, any git fetch origin or git worktree add... command will, when necessary, retrieves the remote branches that are missing locally.

My long-term workaround

As much as I was happy with the short-term workaround I wanted to save me the hassle of this manual step when cloning a new repository into a bare one.

Therefore I came up with a script that I use when cloning repositories for use with git worktree.

Actually not only, it does the work of making the $GIT_DIR how I want it (i.e in .bare), it does also the under laying work of setting the remote.origin.fetch property into the newly created bare repository and fetches all remote branches.

#!/usr/bin/env bash
set -e

# Examples of call:
# git-clone-bare-for-worktrees git@github.com:name/repo.git
# => Clones to a /repo directory
#
# git-clone-bare-for-worktrees git@github.com:name/repo.git my-repo
# => Clones to a /my-repo directory

url=$1
basename=${url##*/}
name=${2:-${basename%.*}}

mkdir $name
cd "$name"

# Moves all the administrative git files (a.k.a $GIT_DIR) under .bare directory.
#
# Plan is to create worktrees as siblings of this directory.
# Example targeted structure:
# .bare
# main
# new-awesome-feature
# hotfix-bug-12
# ...
git clone --bare "$url" .bare
echo "gitdir: ./.bare" > .git

# Explicitly sets the remote origin fetch so we can fetch remote branches
git config remote.origin.fetch "+refs/heads/*:refs/remotes/origin/*"

# Gets all branches from origin
git fetch origin

I have even been one step further by binding this script to a git alias as shown in below .gitconfig file excerpt:

[alias]
	clone-for-worktrees = "!sh $HOME/git-clone-bare-for-worktrees.sh"

Thus I can run git clone-for-worktrees git@github.com:name/my-awesome-project.git and be all set for using the my-awesome-project with git worktrees.

Conclusion

That's all folks.
No matter which solution you pick, as long as it lets you persist using git worktrees I'm happy. There are an awesome feature from git!

How to fail fast your shell script

Fri, 12 Nov 2021 00:00:00 +0000

A couple of weeks ago I came across the scenario in which although my build scripts was having linting issues, the pipeline running this script would not fail.

My investigation led me to stumble upon a nice combo of shell commands that would ensure the script to fail fast and avoid having non desired outcomes.

A neat commands combo to fail fast

set -o errexit
set -o errtrace
set -o nounset
set -o pipefail

In short this should exit as soon as it encounters any non-zero exit code or usage of undefined variables or failed piped commands.

The one-liner command of the previous combo is:

set -Eeuo pipefail

Having this combo in my shell scripts make them safer and therefore increases my confidence when pushing a change.

Reference

How to catch errors as soon as they occur in bash scripts

Wed, 13 Oct 2021 00:00:00 +0000

Let me introduce you to the power trio you will want to add to your bash scripts in order to fail fast upon error and avoid the script to continue despite the error.

Power trio

By trio I mean the 3 set builtins to be found in the below code snippet.

#!/usr/bin/env bash

set -o errexit
set -o nounset
set -o pipefail

# Some example commands
npm ci

npm run build
npm run lint
# ...

Here is a run down of what they aim at:

set -o errexit (short version: set -e): Exits immediately upon non-zero status.
set -o nounset (short version: set -u): Exits immediately upon usage of undefined variables.
set -o pipefail: Exits immediately upon failed piped commands.

Reference

Today I learned: How to assert the new active element after Tab keydown event in Jest

Tue, 12 Oct 2021 00:00:00 +0000

Context

Today I was writing a test that would assert that by using the Tab key onto the button of a component, the focus will move to the next focusable element.

The test was failing, although the expected behaviour was to be seen in the browser.

Failing test

Below createKeydownEvent is a custom utility function.

it('once focused on the button, it can be tabbed away', () => {
	// ...
	const keydownTabEvent = createKeydownEvent('Tab');
	const button = component.querySelector('button');
	const nextInteractiveElement = document.querySelector('a');
	button.focus();

	expect(document.activeElement).toBe(button);

	button.dispatchEvent(keydownTabEvent);

	expect(document.activeElement).toBe(nextInteractiveElement);
});

The expect fails because the expected document.activeElement happens to be the button, as if the Tab keydown event has no effect what so ever.

Solution

After some intense debugging, googling and reaching out to colleagues I came down to this conclusion:

When an element looses focus, the next element to acquire it actually gets it on the next tick of the event loop.

Calling setTimeout(callback, 0), where callback does the assertion, would execute its callback at the end of the next tick i.e. when the next element acquires the focus.

Equiped with this knowledge I could fix the failing test by wrapping the assertion into a setTimeout(callback, 0) call as show below:

setTimeout(() => {
	expect(document.activeElement).toBe(nextInteractiveElement);
}, 0);

Reference

Understanding process.nextTick()

'source: not found' in the context of npm scripts

Fri, 17 Sep 2021 00:00:00 +0000

Context

Today at work I found out that the following script from the scripts section of our package.json was not working on my colleague's machine. He is running Ubuntu. I have seen this happening also on the Arch distribution.

"start:dev": "source .env; nodemon index.js"

This script aims at sourcing a bunch of environement variables and then only running the application.

This had worked under OSX since the beginning of the project though.

What is happening

Basically, if not specified as a npm config, npm-run uses the system's default /bin/sh as shell to execute commands in script entries.
This means that if your system is using a default shell that does not implement the source command, you are getting this source: not found error.

But npm gets you covered 😅

Solution

The solution is to specify the npm's script-shell config, before running the source command.

The script entry presented in the context section above would become:

"start:dev": "npm config set script-shell \"/bin/bash\"; source .env; nodemon index.js"

It is a bit wordy but does usually get you out of trouble as long as the system running the command implements bash.

Reference

How to test a basic (No JavaScript) experience in Testcafé

Wed, 15 Sep 2021 00:00:00 +0000

I am relatively new to Testcafé testing framework that claims for:

End-to-end testing, simplified No WebDriver required. No manual timeouts needed. Cross-browser testing out-of-the-box.

I must admit the syntax is a bit confusing at first, but you get quickly up to speed, thanks to useful documentation, what is quite rewarding.

Progressive enhancement

I do care a great deal about Progressive enhancement. This is my go to approach to build components and experiences for the web.
First deliver a basic experience that works without JavaScript, and then second, if JavaScript is available and if the browser in use can support the enhancement, deliver the enhanced experience.

If you are doing Agile developement, this fits perfectly as you could first ship a basic working experience and in the next iteration the enhanced experience.

What I needed

In order to gain confidence upon the fact that both my basic and enhanced experiences are working, I needed to be able to:

Test the basic experience when the JavaScript that enhances my component is unavailable
Test the enhanced experience when the JavaScript that enhances my component is available

We, from the Testcafé configuration, have no such thing as an option to disable JavaScript, and most especially because Testcafé runs using JavaScript in the browser that drives the test.

Solution

Important: For this solution to work, the JavaScript holding the code necessary for the enhancement should be an external file.
Why? Because the hack is to fake that the JavaScript file is Not found, resolving to a 404 status code.

To perform this lie, we can use Testcafé Request Mock feature.

A request mocker that intercepts requests to a web resource and emulates the response.

The small code snippet below led me to success:

const turnOfJavaScriptMock = RequestMock()
    .onRequestTo(new RegExp('.*\.js'))
    .respond(null, 404);

This is how you instanciate the mock to make any requested .js file in the page under test to respond with a 404 Not Found.

Now you can use this mock in your tests as below:

test
	.page `URL-OF-PAGE-UNDER-TEST`
(`Enter your test label here for the enhanced experience`, async t => {
	// Add your assertions here
});

test
	.page `URL-OF-PAGE-UNDER-TEST`
	.requestHooks(turnOfJavaScriptMock)
(`Enter your test label here for the basic experience`, async t => {
	// Add your assertions here
});

The magic operates through the call to .requestHooks() function that takes our Request Mock as argument and applies it the page under test.

Conclusion

Using a very concise Request Mock that turns off any external JavaScript we are able to end-to-end test the fall back experience of our enhanced experience, i.e the basic experience 😉.

How to use git worktree and in a clean way

Fri, 03 Sep 2021 00:00:00 +0000

A bit of vocabulary

Repository, working tree and bare repository

When you init or clone a git repository into a directory, you are, by default, left with 2 entities:

The repository who takes by default the form of a .git directory. It contains all the technical files and directories needed by git to maintain the project's versions.
The working tree which is all the files and directories that are under version control.

A bare repository is a repository without a working tree. It only contains what you would normally find under the .git directory.
It can be used as a remote! Indeed you can clone a repository from a local directory if this last contains a bare instance of a git repository.

Stash

stash is a git command that allows you to record the current state of the working tree and the index and then go back to a clean working tree. These records are stored on a stack that can be visualized with git stash list.
To recover the last record from the stack, run git stash pop.

Setting the scene

If you had never heard about the command git worktree before, there is a good chance you think that you can only have one branch or commit checked out at a time.

This belief leads you to this inconvenient situation, when, for instance, you need to abandon your work in progress in one branch,

to support a colleague on another branch,
address this review comment on your pending pull request,
fix this bug spotted on QA stage that is a no go for going live,
or worst in case of LIVE outage and that you need to deliver a hotfix as soon as possible.

If the work is not in a state where you would commit it; quite often, if you are aware of the git stash command, you would:

stage your work
stash it
check out the branch that need to be worked on
do the work
stage, commit, and push
check out the branch you were formely on
pop the last stashed piece of work

And then only you can proceed with you work.
Phew, that is a lot of inconvenience.

git worktree to the rescue

With git worktree you can link other working trees to your repository.

Taken we are working on the new-feature branch and that we need to abandon the work to create a hotfix for the main branch.
In the Terminal, and from the root of the directory that hosts the current working tree, run:

$ git worktree add ../hotfix main

This has created a new working tree, checked out to the main branch, inside of the directory ../hotfix.

Now you can move to this directory to create the fix.
Stage, commit and push.

If you come back to your previous directory, you should still have the new-feature branch checked out, and you should be able to resume your work where you left it at. Joy!

At some point you also may want to get rid of the hotfix worktree. Then run:

$ git worktree remove hotfix

If at anytime you want to show the existing worktree for a repository, run:

$ git worktree list

Adding working trees in the parent or the current directory can quickly become a mess.

A better working trees organization

I find that an organization like the one below is much more tidy!

my-awesome-project
 - git-technical-directory
 - new-feature
 - hotfix

bare repository and .git file to the rescue!

Indeed we can proceed like the following:

$ mkdir my-awesome-project
$ cd my-awesome-project

$ git clone --bare git@github.com:myname:my-awesome-project.git .bare

$ echo "gitdir: ./.bare" > .git

So far, we created a directory for our project, cd into it, clone my-awesome-project as a bare repository into a .bare directory. This .bare directory contains what the .git directory contains if we would have gone for a standard git clone command.

Where it is executed, the git command either refer to a .git directory or to a .git file. This last needs though to contain a pointer to the repository directory. The pointer is the gitdir setting.
Actually in every directory created by the git worktree add command, you can find a .git file that contains this gitdir setting.

Now it is time to create the 2 worktrees:

$ git worktree add new-feature
$ git worktree add hotfix master

At this stage our directory looks like:

my-awesome-project
 - .bare
 - .git
 - new-feature
 - hotfix

This is pretty close from what we were aiming for and much better than this mess:

hotfix
my-awesome-project
 - .git
 - .gitignore
 - assets
 - index.html
 - package.json
 ...
 - README.md

I hope this git worktree is as good breaking news for you as it was for me and that it will improve you git experience.

Update January 14th, 2022

After using Git worktrees for a few weeks, in the manner described in this blog post, I have noted two inefficiencies.

The good news is that I came up with solutions to cover up for them. You will find them as part of these complementary blog posts:

Workarounds to Git worktree using bare repository and cannot fetch remote branches
(Coming soon!) Git hook to have a npm based project to install dependencies at checkout

References

How to disable a variable font's variation features with open source tools

Fri, 27 Aug 2021 00:00:00 +0000

Today at work I was told to integrate a variable font on our pages. Once integrated I found out that the font, despite converted to .woff2 format was still weighting half a mega byte.
This font featured several variations, for instance the Width, Weight and Optical size variations. In our use case we were just using the Weight variation.
I then asked myself, is there a way to strip features from a variable font?
Hence, not being a designer and not having fancy paid applications at my disposal I was in reach for an open source solution.

After quite some research I found the perfect set of tools!

Below is my step-by-step guide to achieve striping out 2 variation features out of a font, as well as reducing the Weight variation range.

What you need

A variable font, let's call it "MyAwesomeVariableFont", that includes a bunch of variation features and in its .ttf (True Type Font) form
fonttools command line tool (Install fonttools)
varLib instancer documentation
woff2_compress command line tool (Get up to speed by following How To Convert Variable TTF Font Files to WOFF2)

Generating MyAwesomeVariableFont.woff2 partial variable font

In the below commands, it is considered that the command line tools are in your $PATH, if not you can also use the absolute path to their binaries.

Download MyAwesomeVariableFont font under the name of MyAwesomeVariableFont.ttf
In the Terminal navigates to the folder you have just downloaded the font to
Run fonttools varLib.instancer ./MyAwesomeVariableFont.ttf wdth=drop opsz=drop wght=300:700
Run woff2_compress ./MyAwesomeVariableFont-partial.ttf
Run mv ./MyAwesomeVariableFont-partial.woff2 ./MyAwesomeVariableFont.woff2
Copy MyAwesomeVariableFont.woff2 to your app's font folder

In the above steps, only 3. and 4. need deeper explanation.

In step 3. we use the varLib instancer in order to drop the Width (wdth) and the Optical size (opsz) variation features as well as to restrict the Weight (wght) variations to a range that spans from a font-weight of 300 to 400.

In step 4. we run woff2_compress CLI tool to compress our .ttf generated partial font to the .woff2 format, much more suited for the web.

Conclusion

Now, once loaded on your site/application, you should only be able to apply variations on the Weight axis, and from 300 to 700.
And most importantly you should have drastically reduce the footprint of your variable font.
In my case the .woff2 file footprint had decreased by 73%.

Feel free to explore the varLib instancer documentation to address your needs.

How do browsers process the @font-face src descriptor list

Thu, 26 Aug 2021 00:00:00 +0000

You may have come across the src descriptor of the @font-face CSS rule and wonder how is this actually processed by the browser.
Sure there is something about the font's extension and/or the format hint, but what if the browser does support many of the multiple font type listed?

To answer this question I will just quote the W3C recommendations website:

Its value is a prioritized, comma-separated list of external references or locally-installed font face names. When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate. Fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list.

Hence quote on format hints:

The format hint contains a comma-separated list of format strings that denote well-known font formats. Conformant user agents must skip downloading a font resource if the format hints indicate only unsupported or unknown font formats. If no format hints are supplied, the user agent should download the font resource.

/* Load WOFF2 font if possible, otherwise WOFF, else use OpenType font */
@font-face {
  font-family: bodytext;
  src: url(ideal-sans-serif.woff2) format("woff2"),
       url(good-sans-serif.woff) format("woff"),
       url(basic-sans-serif.ttf) format("opentype");
}

Reference

Font reference: the src descriptor, on www.w3.org.

How to locally delete all remotely merged git branches

Mon, 09 Aug 2021 00:00:00 +0000

If you are like me and have a bad habit of not deleting your local branches as you merge them and delete them remotely, this one is for you.

A two commands solution

First command to fetch but as well prune any branches that no longer exist on the remote branch.

git fetch -p

-p is short for --prune.

Now that we have a clean slate we can perform an efficient deletion with the second command:

git branch -vv | grep ': gone]'|  grep -v "\*" | awk '{ print $1; }' | xargs git branch -D

Here is it decomposed:

git branch -vv

Which lists your local branches and including "gone" if it is not present anymore remotely. -vv means very verbose.

grep ': gone]'

Which filters all lines including : gone].

grep -v "\*"

Which ignores the currently checked out branch.

awk '{print $1}'

Which grabs the first column in the output, being the branch name.

xargs git branch -D

Which runs git branch -D for the names of the filtered branches.

Et voilà!

If for some reasons you want to exclude some branches that would show up in the filtered list, amend the grep -v "\*" command to something like egrep -v "(^\*|branch-to-keep1|branch-to-keep2)".

Reference

Remove branches not on remote, on Stack Overflow.

Restore your easier window navigation mappings on Netrw buffers in Vim

Mon, 12 Jul 2021 00:00:00 +0000

If you are like me and have added the below mappings into your .vimrc file as mappings to window commands meant for navigation...

" Easier window navigation.
map <C-h> <C-w>h
map <C-j> <C-w>j
map <C-k> <C-w>k
map <C-l> <C-w>l

... you may have figured out that they do not work on Netrw buffers.

Below is the way to fix that...

First off you need the following function:

function NetrwMappings()
	nnoremap <buffer> <C-h> :wincmd h<cr>
	nnoremap <buffer> <C-j> :wincmd j<cr>
	nnoremap <buffer> <C-k> :wincmd k<cr>
	nnoremap <buffer> <C-l> :wincmd l<cr>
endfunction

And finally the following auto commands group that lets you set these remaps when on netrw buffer.

augroup netrw_mappings
  autocmd!
  autocmd filetype netrw call NetrwMappings()
augroup END

Add these two last code blocks to your .vimrc then re-source it and or restart your Vim and enjoy!

Reference

Answer on a Stack Overflow's thread

Today I learned: How to encode/decode base64 string from the command line

Tue, 06 Jul 2021 00:00:00 +0000

Usually in order to encode/decode a piece of string I would hunt for an online tool to do so. Today, I have seen a colleague in need to decode some base64 token, do it right from her command line.

Here are the magic commands:

Encode a string to base64 from the command line

echo -n 'string-to-be-encoded' | base64

In the above command the -n flag ensures you do not miss a hidden character like line breaks...

This command outputs:

c3RyaW5nLXRvLWJlLWVuY29kZWQ=

Decode a base64 string from the command line

echo -n 'c3RyaW5nLXRvLWJlLWRlY29kZWQ=' | base64 --decode

This command outputs:

string-to-be-decoded%

Everything in front of the last % character is the original string.

Reference

Find out how to do these operations using files rather than strings within the article: How to base64 encode and decode from command-line

Today I learned: How to upload a buffer as a file to a Google Cloud Storage bucket

Tue, 06 Jul 2021 00:00:00 +0000

Context

Today I needed to upload some file to a Google Cloud Storage bucket.
Many of examples out there are illustrated with scenarios using a file already stored on the file system or coming from some POST request.
None of these where matching my use case. I needed to upload a JSON file I would build from a JSON object.
I had no intent to persist this file onto the server's file system, therefore Node.JS Buffer would be a great pick.

Solution

First off, you need the @google-cloud/storage npm module, which is the Node.js client for the upload Job. So go ahead and run npm install @google-cloud/storage at the root of your project.

As stated in Google APIs documentation, before you begin:

Select or create a Cloud Platform project.
Enable billing for your project.
Enable the Google Cloud Storage API.
Set up authentication with a service account so you can access the API from your local workstation.

On top of this I would add Create a bucket to be used as the uploads destination storage.

Now it's coding time...

In the following example I turn a JSON object into a String before uploading, but you could go straight with the String.

const {Storage} = require('@google-cloud/storage');
const character = {
	firstName: 'Harry',
	lastName: 'Potter'
};

// Turns the object into a String and then a buffer.
const fileContent = JSON.stringify(character, null, 4);
const fileBuffer = Buffer.from(fileContent, 'utf-8');

// Creates a client.
const storage = new Storage({
	projectId: 'your-project-id',
	keyFilename: 'file-path-to-your-google-service-account-key'
});

const bucket = storage.bucket('name-of-the-upload-bucket'));
const file = bucket.file('name-of-the-destination-file');

// Uploads the file.
file.save(fileBuffer).then(() => {
	// Success handling...
}).catch(error => {
	// Error handling...
});

In case you need to programmatically check if the file content stored is as you expect it. In the then block you can "download" the file to console log its content as demonstrated below:

// Uploads the file.
file.save(fileBuffer).then(aync () => {
	const checkedFile = bucket.file('name-of-the-destination-file');
	const content = await checkedFile.download();
	console.log(`File content: ${content}`);
}).catch(error => {
	// Error handling...
});

That's all folks!

Today I learned: How to "include" a link inside a form input label

Tue, 29 Jun 2021 00:00:00 +0000

Anti-Pattern

You may be familiar with this: A checkbox associated with a label that contains a link to a Terms and Conditions page. It is usually mapped as demonstrated in below code snippet.

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the <a href="terms-and-conditions.html" target="_blank">Terms and Conditions</a>
</label>

I would flag this practice as an Anti-Pattern, as it is too often used, but endangers the accessibility of your form.
Indeed as the Mozilla Developer Network (MDN) mentions, it "makes it difficult for people to activate the form input associated with the label".

Basically, if the users click on the link part of the label, and this is likely to happen as it is a common practice for checkboxes and radio buttons to click the label to select the option; they will get to the target of that link but not activate the form input. This can be, for some, a deceptive experience.

The rule also applies, to not only anchors (commonly called links), but for any other interactive elements such as button elements.

Solution

The solution consists in taking the anchor out of the label as demonstrated in the below code snippet.

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html" target="_blank">Read our Terms and Conditions</a>
</p>

Reference

Mozilla Developer Network element article

Today I learned: How to match a portion of text that spans over multiple lines with a JavaScript regular expression

Mon, 28 Jun 2021 00:00:00 +0000

Problem

Let's say you have the following 5 lines long quote by Mark Twain:

Keep away from people who try to belittle your ambitions.
Small people always do that,
but the really great make you feel that you,
too,
can become great.

Now you wish to match, with a regular expression, from people on line 1, and until really on line 3.

Hint: Spotlight on a very useful set of tokens

The token [^] lets you match any character, including new line.
If you append the * quantifier token to it, it matches what matches [^] but between zero and an unlimited amount of times.

Beware though, because the token [^] seems to only work in JavaScript.
An alternative to it seems to be [\s\S].

\s matches any whitespace character
\S matches any non-whitespace character

Solution

Using `[^]*`

/people[^]*.*really/m

This, according to regex101.com goes as follow:

people matches the characters people literally (case sensitive)
[^] matches any character, including newline
* matches the previous token between zero and unlimited times, as many times as possible, giving back as needed (greedy)
. matches any character (except for line terminators)
* matches the previous token between zero and unlimited times, as many times as possible, giving back as needed (greedy)
really matches the characters really literally (case sensitive)

Global pattern flag:
m modifier: multi line. Causes ^ and $ to match the begin/end of each line (not only begin/end of string)

Using `[\s\S]*`

/people[\s\S]*.*really/m

This, according to regex101.com goes as follow:

people matches the characters people literally (case sensitive)
\s matches any whitespace character (equivalent to [\r\n\t\f\v \u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff])
\S matches any non-whitespace character (equivalent to [^\r\n\t\f\v \u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff])
* matches the previous token between zero and unlimited times, as many times as possible, giving back as needed (greedy)
. matches any character (except for line terminators)
* matches the previous token between zero and unlimited times, as many times as possible, giving back as needed (greedy)
really matches the characters really literally (case sensitive)

Global pattern flag:
m modifier: multi line. Causes ^ and $ to match the begin/end of each line (not only begin/end of string)

References

Today I learned: How to suspend Vim temporarily, run some commands, and go back

Sat, 19 Jun 2021 00:00:00 +0000

Two magic commands

In Vim, CTRL + z suspends it, putting its process in the background. You land back, in your Terminal, where you launch the vim process.
In the terminal, fg puts back the background process in the foreground.

A use case out of so many

You are coding in Vim
You want to quickly lint your all code base to capture lint issues
CTRL + z to go back to the Terminal
Run your lint command, in my case: npm run lint
Run fg to jump back where you left your Vim

Although I am using TMUX and could have a dedicated split or window for the lint purpose I could switch to, I found that presented solution requires less brain power.

References

"How to temporarily exit Vim and go back" Stack overflow thread

Bash command chaining operators

Wed, 19 May 2021 00:00:00 +0000

Semicolon operator (;)

The semicolon operator executes the commands sequentially.

$ command1; command2

The above instruction will first execute command1. On both success or failure of command1, it will go ahead and execute command2.

Ampersand operator (&)

The ampersand operator positionned after a command, executes it in the background. When chaining commands, where each command is followed by the & operator, all commands will be executed in background, simultaneously.

$ command1 & command2 &

The above instruction will execute command1 and command2 in background, simultaneously.

AND operator (&&)

The AND(double ampersand) operator executes the command after the operator only if the one before succeeds.

$ command1 && command2

The above instruction will execute command2 only if command1 succeeds.

OR operator (||)

The OR(double pipe) operator acts as a else statement. It executes the command after the operator only if the one before fails.

$ command1 || command2

The above instruction will execute command2 only if command1 fails.

PIPE operator (|)

The PIPE operator lets the previous command standard output to be passed as the standard input of the following command. This often comes in handy when you want to filter the output of the previous command.

$ history | grep npm

The above instruction will execute the history command, and filter its output to only display lines including the string npm.

AND – OR operator (&& – ||)

The AND – OR operator is nothing else than the combination of AND and OR operators. It acts as a if – else statement.

$ command1 && upon-command1-success || upon-command1-failure

The above instruction will execute command1 first. If it succeed, it will execute upon-command1-success. If command1 fails, it will execute upon-command1-failure

Today I learned: How to log a JavaScript object with indentation to the console

Wed, 17 Mar 2021 00:00:00 +0000

Use JSON.stringify() function

Although I was using the JSON.stringify() function for years; I found myself logging JavaScript objects to the console the most unproductive way.
Worse, upon need, I would copy paste the output into a JSON formatter.

Efficiently use JSON.stringify() function

I discovered today that the JSON.stringify() function takes two additional arguments: replacer and space.
I will leave out the replacer argument of this post, but the space argument is all I ever needed.

As stated in MDN:

The space argument may be used to control spacing in the final string.

If it is a number, successive levels in the stringification will each be indented by this many space characters (up to 10).

If it is a string, successive levels will be indented by this string (or the first ten characters of it).

This means that:

JSON.stringify({ a: 2 }, null, ' '); will indent by 1 space
JSON.stringify({ a: 2 }, null, 1); will also indent by 1 space
JSON.stringify({ a: 2 }, null, 4); will also indent by 4 spaces
JSON.stringify({ a: 2 }, null, 15); will indent by 10 spaces
JSON.stringify({ a: 2 }, null, \t); will indent with tabs

Example: Output indented with tabs

Below your can find the example taken from MDN for indenting with tabs:

JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
// returns the string:
// '{
//     "uno": 1,
//     "dos": 2
// }'

Reference

MDN article about JSON.stringify, space argument section

Today I learned: How to delete until the beginning of the line including the cursor in Vim

Tue, 16 Feb 2021 00:00:00 +0000

Five years I have been using Vim, as well as consumming various content about it such as blogs, books, screencasts, forums... Five years and I never came across this single character that may make a difference.

Inconvenience

Note: In the below text snippets, the square brackets symbolise the cursor, and the character inside these brackets, the character being under the cursor.

Let's say you have the following text snippet, and that you are in normal mode:

Today is[:]Tuesday

Now you want to delete backward until the beginning of the line.

First things that come in mind are usually the commands d^, d| or d0.
But unfortunately, here is what you are left out with:

[:]Tuesday

As you can see the character previously under the cursor is still present. This does not meet the original expectation.

The reason

The reason behind this, is that the motions used above, ^, | and 0 are defined as exclusive in Vim.

According to Vim documentation:

A character motion is either inclusive or exclusive. When inclusive, the start and end position of the motion are included in the operation. When exclusive, the last character towards the end of the buffer is not included.

In our example the "last character towards the end of the buffer" is the :, therefore it is not deleted.

The solution

Hopefully, Vim has a mean to turn an exclusive motion into an inclusive motion (and vice-versa), using the v modifier.
Here are the inclusive equivalent of the above presented commands:
dv^, dv| and dv0.

Now applying one of these commands to the first text snippets produces the following:

Tuesday

Bingo!

Beyond deletion

Since the behaviour comes from the nature of the motion rather than the operator, this can be applied to other operations too, such as change (c) or yank (y).

Below, is the use case of willing to change Today is: Tuesday to Yesterday was Tuesday, starting with the text snippet and the cursor positioned on the ::

Today is[:]Tuesday

Now, type the sequence: cv0Yesterday was and then Escape. Now you should end up with:

Yesterday was Tuesday

How to tell a motion is exclusive or inclusive?

In the Vim documentation, for each motion description, it provides its nature.
For instance here is the excerpt for the 0 motion:

0 To the first character of the line. exclusive motion.

Reference

Today I learned: How to show current buffer's path in Vim's normal mode

Thu, 04 Feb 2021 00:00:00 +0000

In case you are like me and opted for just having the filename showing in status line, this might have its limitations.
Indeed, if you have two buffers sharing the same filename (e.g. links.scss), but displaying files stored at different locations, you may want to know which one is which one (e.g. settings/links.css or mixins/links.scss).

In normal mode, just type the shortcut Ctrl-g and the file's path will be printed in the command line area.

An alternative, is to use the :f command which is short for :file and achieve the same goal.

Reference

Vim documentation

Today I learned: How to style a
's element as display inline

Tue, 19 Jan 2021 00:00:00 +0000

Context

I was creating a sorting toolbar component made of a fieldset, its legend, two input of type radio, their associated label and finally a submit button. That's it for the semantic.

In terms of presentation, the requirement was to hide the inputs only visually so that they remain accessible, have the legend and the labels on the same line.

First thought was to use flexbox and have the fieldset to be display: flex but that was where the problems started. The legend would not flex. Then I tried to make the legend and label display: inline-block. Still no luck.
This was about where I started googling.

I came across a bunch of statements:

From MDN Styling web forms section:

The <legend> element is okay to style, but it can be a bit tricky to control placement of it. By default it is always positioned over the top border of its <fieldset> parent, near the top left corner. To position it somewhere else, for example inside the fieldset somewhere, or near the bottom left corner, you need to rely on positioning.

From Stackoverflow thread: Why won't my legend element display inline?

Legends are special. In particular, their default rendering can't be described in CSS, so browsers use non-CSS means of rendering them. What that means is that a statically positioned legend will be treated like a legend and be separate from the actual content of the fieldset.
The weird doesn't end there; if you reverse the order of the span and the legend, the legend will still show up on top in most browsers (but not in Opera, apparently).
— Boris Zbarsky

Legends just don't accept display: inline or display: inline-block, but you can give it float: left and it will display similarly to what you want.
— kzh

That was a mind blow right there!

Solution

The solution was to float: left the legend and the two label as suggested by kzh in the citation above. This worked for me cross browser. I would not have expected float: left to be my saviour in 2021!

Vim CursorHold autocommand error when opening command line window

Mon, 18 Jan 2021 00:00:00 +0000

Trouble

When opening the Command-line window in Vim (q: in Normal Mode) I was getting the following error:

Error detected while processing CursorHold Autocommands for "*":
E11: Invalid in command-line window; <CR> executes, CTRL-C quits: checktime

Context

This is most likely to happen if you have in your .vimrc, or if one of your plugin is running, such an autocommand: autocmd CursorHold * checktime.

Solution

Googling for a bit I came across this closed issue of vim-polyglot Github repository that provides the solution.

Just add silent! between * and checktime and that's all, the warning should just silent out.
You may have to not only reload your .vimrc, but to also quit and re-open Vim for this change to take effect.

Once again here is the fix:

Before:

autocmd CursorHold * checktime

After:

autocmd CursorHold * silent! checktime

Express.js error: Cannot set headers after they are sent to the client

Thu, 14 Jan 2021 00:00:00 +0000

Trouble

Your Express.js server is throwing an ERR_HTTP_HEADERS_SENT: Cannot set headers after they are sent to the client and you have a useless stack trace to work from like the following:

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:467:11)
    at ServerResponse.header (/usr/src/app/node_modules/express/lib/response.js:771:10)
    at ServerResponse.send (/usr/src/app/node_modules/express/lib/response.js:170:12)
    at done (/usr/src/app/node_modules/express/lib/response.js:1008:10)
    at render_file (/usr/src/app/node_modules/hbs/lib/hbs.js:49:14)
    at ReadFileContext.callback (/usr/src/app/node_modules/hbs/lib/hbs.js:168:16)
    at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:232:13)

Why the heck do I get this?

As the cause of this issue is extremely well explained in "Understanding Node Error ERR_HTTP_HEADERS_SENT" by Prosper Opara I let you get the insights there.
I would just add to the article that the lack of using the return keyword when calling the Express next() function may also cause the ERR_HTTP_HEADERS_SENT issue.

Solution

By browsing the Express.js git repository I came across this issue that provides a very neat code snippet that improves the stack trace to identify the line responsible for the issue.

The code snippet consists of a middleware that monkey patches the res.render and res.send Express.js functions in order to prevent the application from crashing and improve the logged stack trace.

Here is the snippet:

app.use((req, res, next) => {
    const render = res.render;
    const send = res.send;
    res.render = function renderWrapper(...args) {
        Error.captureStackTrace(this);
        return render.apply(this, args);
    };
    res.send = function sendWrapper(...args) {
        try {
            send.apply(this, args);
        } catch (err) {
            console.error(`Error in res.send | ${err.code} | ${err.message} | ${res.stack}`);
        }
    };
    next();
});

If you plug this onto your Express.js application you will get a much more useful stack trace like below:

Error in res.send | ERR_HTTP_HEADERS_SENT | Cannot set headers after they are sent to the client | Error
     at ServerResponse.renderWrapper [as render] (/usr/src/app/app/server.js:289:15)
     at index (/usr/src/app/app/controllers/home-controller.js:88:21)
     at processTicksAndRejections (internal/process/task_queues.js:89:5)

In the above stack trace the line responsible for the second render is the line 88 of the home-controller.js file. Bingo!

All the credit should go to James Starkie a.k.a jstarmx on Github. James you made my day on this one ☀️.

NOTE: Do not forget to remote the middleware once you are done debugging 😉

No match error when testing an Express.js controller doing multiple calls to a same backend

Wed, 13 Jan 2021 00:00:00 +0000

Trouble

Getting Nock: No match for request ... with error code ERR_NOCK_NO_MATCH

Context

I had a controller requesting the same backend service but onto 2 different endpoints. My intent was to mock these calls using the great "HTTP server mocking and expectations library for Node.js" Nock. This intent take the form of the below code:

const scope = nock('http://backend')
	.get('/user/details')
	.reply(200, {
		userId: 123,
		email: '123@example.com'
	})
	.post('/api')
	.reply(200, {
		data: {
			// data to be returned
		}
	});

When my controller was reaching the /user/details endpoint it was being matched and resolved, but when it was reaching the /api on it was getting Nock: No match for request /api exception.

I knew that interceptors, as stated in the Nock documentation, are removed as they are used. Though, in my opinion I did not considered the /api as yet used because of the misleading message telling me it could not be matched.

Solution

The solution was to append the call to the .persist() method between nock('http://backend') and get('/user/details') as shown in code below:

const scope = nock('http://backend')
	.persist()
	.get('/user/details')
	.reply(200, {
		userId: 123,
		email: '123@example.com'
	})
	.post('/api')
	.reply(200, {
		data: {
			// data to be returned
		}
	});

I would have found the .persist() call to be more intuitive if scoped at endpoint level rather than at hostname level though. Well at least now my test passes 🎉.

How to repurpose a 2006 Macbook into a Linux laptop

Sat, 09 Jan 2021 00:00:00 +0000

Mission

Allocate an old computer to my daughter, as part of home schooling due to COVID-19, so that she can attend Webex conference with her teacher and classmates as well as sign into some online E-learning app.

Background

For actually a few weeks I developed interest in the opportunity to convert an aging iMac (mid-2011) into a Linux computer.
I have been hesitant by fear to mess it up or to embark onto a time consuming project.
That was before I remembered I had an even older Mac around I could probably mess up with and that could be useful for my daughter's Home schooling.

This older Mac is an Apple Macbook from 2006 with 2GB of RAM.

It was getting covered with dust in the bottom of a drawer for a few years already.
Well, it looks like the current pandemic situation is giving it a chance the revive, but under a new skin!

Getting ready

For starter, you need an ISO image of a suitable Linux distribution that this computer could support.

My initial choice was Ubuntu 16.04 (32bit), but ended up using a lighter one in the name of Lubuntu 16.04 (32bit).

This Macbook does not support booting from USB, so make sure the Mac you wish to repurpose supports this before going wild about using Etcher to create a USB flash drive to boot from. If your Mac support it, good for you and go ahead with it.
In my case I burned the ISO on a DVD, from another Mac with optical drive.

Here are the steps to get the install going:

Go to Lubuntu 16.04 release download page and grab the image that fits your Mac. For my 2006 Macbook, it was "32-bit PC (i386) desktop image".
Once downloaded, right click on the downloaded file in the Finder, and pick the option to Burn it. Advice: You may want to select a low Burning speed to avoid to waste a DVD-R with an aborted copy.
On the target Mac, that hopefully has a working optical drive, insert the DVD and restart it holding the C key until it boots on the DVD.
Follow the installation instructions with the choices that makes sense to you.
If you ever get to configure your Keyboard, do not just pick the language but also the layout of the language, for instance, "English (Macintosh)", because English PC and Macintosh have different keyboard layouts 😉.
At the end of the installation, you are asked to restart the computer.
After restart, Boom! You should be running Lubuntu by now, congrats.

Software updates

You should be doing the Software updates in order to have, for instance, the latest Firefox...

Configuring the Apple iSight webcam

Out of the box you won't be able to use your Mac internal webcam. It is though a fairly simple task to achieve to configure it.

Just use the following steps:

Get the AppleUSBVideoSupport file. You can find that file on an existing Mac OSX 10.4 or 10.5 installation at this location: /System/Library/Extensions/IOUSBFamily.kext/Contents/PlugIns/AppleUSBVideoSupport.kext/Contents/MacOS/AppleUSBVideoSupport or you can download it from Download the zip that contains the AppleUSBVideoSupport file
Store the AppleUSBVideoSupport somewhere in your newly Lubuntu Mac.
Open the Terminal(Menu > System Tools > LXTerminal)
Update your repositories with sudo apt-get update.
Install the iSight Firmware Tools with sudo apt-get install isight-firmware-tools
The installer will ask you for the AppleUSBVideoSupport file. give it the right path to that file.
Reboot or log out and log back in. You can now use your iSight.

Where to go from here

You may want to optimize and customize your Lubuntu, right?
This Lubuntu 16.04 review and how to make it better video does a great job at guiding you.

Conclusion

The repurposed Mac runs fairly smooth, at least much better than it was before under OSX.
It is perfect for browsing the web unless you get to use some fancy online apps, like Cisco Webex for instance.
Using this last one is possible through Firefox or Chrome add-on/extension. You should give it a try to judge. In my case and at this stage I'm not sure that my issue with it was only related to CPU/RAM. This could also be a bandwidth issue.

In the end, since my daughter's need is heavily relying on the ability to have stable conference calls, it is less likely she will use that computer. On the other hand, the E-learning online app was running smoothly though.

The exercise was worth it in my opinion, because now I feel more confident to go ahead and repurpose my mid-2011 iMac with most likely 64-bit Ubuntu.

References

Invalid file mode error when deploying a Node.js application to Cloud Foundry

Thu, 07 Jan 2021 00:00:00 +0000

Trouble

Getting Failed: The resource file mode is invalid: File mode '444' with path... is invalid. Minimum file mode is '0600'

Context

In my case it concerned a file nested in node_modules/.cache.

Solution

The solution was to add a .cfignore file at the root of the application to deploy.

Here is the content of my .cfignore file that solved the issue:

node_modules/.cache

Reference: Deploy a Nodejs App to Cloud Foundry

Create a pull/merge request starting from your terminal

Fri, 16 Oct 2020 00:00:00 +0000

Did you know, or even noticed?

On your first git push -u command you issue from your terminal, the git CLI offers you a link to straighly jump to creating the Pull/Merge request for your current branch on repository host platform (e.g. Github, Gitlab...)?

Try out...

git checkout -b pr-test
echo "# Testing PR" > test.md
git add test.md
git commit -m 'Add test file'
git push -u origin pr-test

You should be getting something like:

...
...
remote: To create a merge request for pr-test, visit:
remote:   https://gitlab.com/morgaan/morgan.cugerone.com/-/merge_requests/new?merge_request%5Bsource_branch%5D=pr-test
remote:
...
 * [new branch]      pr-test -> pr-test
Branch 'pr-test' set up to track remote branch 'pr-test' from 'origin'.

Now if you click the link in the console output (e.g. Cmd+click in iTerm2), you should be brought to the page to create the Pull/Merge request for that branch.

Vim indentation options

Fri, 18 Sep 2020 00:00:00 +0000

tabstop: how many columns a tab should be made up of in the editor view.
expandtab: when enabled, insert the appropriate number of spaces when in insert mode.
shiftwidth: how many columns text will be indented when using indent operations (such as << or >>) in normal or visual mode
softtabstop: when enabled,
- softtabstop < tabstop && noexpandtab, this will result in a combination of tabs and spaces to make up the total spacing .
- softtabstop == tabstop && noexpandtab, this will always force the use of tabs.
- expandtab, the value of softtabstop will be ignored and spaces will be forced
shifround: round indent to nearest multiple of set shiftwidth on indent operations (>> << in Normal mode, CTRL-T CTRL-D in Insert mode)

Source: A byte of Lox (Tabs, stop! The truth about tab and spaces in Vim)

Today I troubleshot: Narrow non-breaking space not rendering

Fri, 21 Aug 2020 00:00:00 +0000

Trouble

Narrow non-breaking spaces ( ) would not render on a webpage.

First hint

I found out that the culprit was the sans-serif font family in use.

Narrowing down the problem

After further investigation and especially some tinkering on Codepen I came to these statements:

  in regular font type is rendered
  in italic font type style is rendered
  in bold font type is NOT rendered

The third statements appears to me as a bug to be honest.

Some googling brought me to this additional information:

In this case, narrow non-break space doesn't appear correctly because the glyph (U+202F) doesn't exist in Georgia font.

Source: sumatrapdf issue tracker ("narrow non-break space" not displayed well in ePUB and PDF files)

At this stage I realized that sans-serif bold may also miss this glyph, and that I will need to work around that.

Solution or rather workaround

First I thought about CSS, but it is impossible to style HTML entities like   because they are just characters.

My final solution was to wrap this HTML entity around a HTML tag. I even created a custom one for the occasion. Inspired by the   entity name, I came up with the <nnbsp> element.

The workaround is to assign font-weight: normal; to this custom tag.
Of course I could have also come up with an utility class, but I found it take more real estate in the code.

Note: This can only work if the regular type for the font includes the narrow non-breaking space glyph, what is the case for sans-serif.

Example solution

HTML Markup:

<p class="u-sans-serif">
	<span class="u-bold">
		FIX Narrow non-breaking space issue<nnbsp>&#8239;</nnbsp>!
	</span>
</p>

Accompanying CSS:

.u-sans-serif {
	font-family: sans-serif;
}

.u-bold {
	font-weight: bold;
}

/* This is the workaround. */
nnbsp {
	font-weight: normal; /* Force Regular type rather than Bold. */
}

Today I learned: How to tailor my `npm init` experience

Fri, 07 Aug 2020 00:00:00 +0000

If you find yourself often creating package.json files using the npm init command, there is a chance you would be pleased to know you can customize this process to your preferences and liking.

Creating an .npm-init.js file

Here is a straight forward way to do so:

First off, create a file called .npm-init.js in your home directory.

Then edit this file, cherry picking from the below example, and adapting to your liking and save it.

const author = 'Captain Anonymous ';

module.exports = {
	name: prompt('What awesome name should this module carry', 'legend'),
	version: '0.1.0',
	author: author,
	license: 'MIT',
	customField: 'Example custom field',
	otherCustomField: 'This example field is really cool'
}

In the above example, we basically export the properties that will make up our desired package.json file.

The prompt function is used to prompt the user with a question and its default answer. Any other properties from the example will end up to be set with the value, or the value of the variable, it is assigned with.

Now, whenever you will use the npm init command, you will get a much better experience tailored to your need.

Custom npm init experience output

Below you can find the output generated from the npm init command, using the .npm-init.js file from this blog post.

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
What awesome name should this module carry: (legend)
About to write to /Users/captainanonymous/package.json:

{
  "name": "legend",
  "version": "0.1.0",
  "author": "Captain Anonymous",
  "license": "MIT",
  "customField": "Example custom field",
  "otherCustomField": "This example field is really cool"
}


Is this OK? (yes)

Reference: Official npm documentation (Running a CLI questionnaire)

Today I learned: HTML input checkbox can have an indeterminate state

Mon, 03 Aug 2020 00:00:00 +0000

As stated by the Mozilla Developer Network documentation,

"In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate."

In the above, a checkbox refers to the HTML element <input type="checkbox" />.

Since I had never heard about it before in so many years of being a Web developer, I thought it deserves a bit of spotlight.

Most common use case

In a hierarchical checkboxes structure, the indeterminate state aims at communicating, on a parent checkbox, that sub-items/sub-options are being collected (checked).

Example: The grocery list

In upcoming list representations:

[ ] represents an unchecked checkbox
[-] represents an undeterminate checkbox
[x] represents a checked checkbox.

The below code block aim at representing the inital state of the list:

[ ] Fruits & veggies
	[ ] Apple
	[ ] Banana
	[ ] Cucumber
[ ] Dairy products
	[ ] Butter
	[ ] Milk

The below code block aims at representing a new state, e.g:

"Apple" is checked
"Fruits & Veggies are being collected".

[-] Fruits & veggies
	[ ] Banana
	[x] Apple
	[ ] Cucumber
[ ] Dairy products
	[ ] Butter
	[ ] Milk

In the above scenario the user checked the "Apple" item.

In order to communicate the state "Fruits & Veggies are being collected", the "Fruits & Veggies" checkbox gets assigned an indeterminate state.
Most browsers render this state using "a horizontal line in the box (it looks somewhat like a hyphen or minus sign) instead of a check/tick", just as we did in the above code block.

Technical details and constraints

This can only be an enhancement, since the assignment of the indeterminate state can only be done by JavaScript.
There is not such thing as an indeterminate property on the <input type="checkbox" /> HTML element, in comparison to the checked state.
inputInstance.indeterminate = true; is how you set that state in JavaScript, where inputInstance is an instance of the HTMLInputElement JavaScript object.
At form submission, no data is sent to represent an indeterminate checkbox. Indeed, it is as if checkbox was not checked.
Screen readers may consider the indeterminate checkbox as not checked.
This is at least the case for Voice Over at the time of writing.
There is an :indeterminate CSS pseudo class that can be used to target an indeterminate checkbox.
However, be wary! Indeed that :indeterminate used alone would not only match checkboxes, but could also match also <input type="radio"> elements and <progress> elements.

You can read more about the indeterminate checkboxes on CSS Tricks where they present a bunch of implementations and also another use case: "Rotating among the states".

Reference

Core principles of Progressive Enhancement

Fri, 17 Apr 2020 00:00:00 +0000

The progressive enhancement strategy consists of the following core principles:

Basic content should be accessible to all web browsers
Basic functionality should be accessible to all web browsers
Sparse, semantic markup contains all content
Enhanced layout is provided by externally linked CSS
Enhanced behavior is provided by Unobtrusive JavaScript, externally linked JavaScript
End-user web browser preferences are respected

Source: Wikipedia (Progressive enhancement Wikipedia article)

Fuzzy file search prompt ready upon vim entrance

Fri, 17 Apr 2020 00:00:00 +0000

When I want to work on a project, I type vim ., from my Terminal, in this project's directory.

This brings up Netrw, the default file explorer in Vim.

In 90% of the time, I then fuzzy search the files I need to work on.

Do you see some inefficiency here?
What if I could be prompted with the fuzzy file search, as soon as I enter Vim?

Here is a little snippet I came up with and put in my .vimrc file to enable that.

function MyVimEnter()
    if argc() == 1 && argv(0) == '.'
      execute "Files"
    endif

    return
endfunction
" The 'nested' before call allows nested autocmds, important for
" syntax detection etc.
autocmd VimEnter * nested call MyVimEnter()

Now in the other 10% of the time, I can just hit Esc key to dismiss the Fuzzy file search.

In the fuzzy file search, in my case FZF.vim, I can pick, using the Tab key, the few files I know will be working on and once ready hit Enter, and boom I have all the buffers I need to mess up with.

I hope this gives you some lead to improve your "project entrance" workflow.

Essential seeds

Thu, 25 Apr 2019 00:00:00 +0000

As Ryder Carroll states in his brilliant "The bullet journal method" book:

"The seed of passion is curiosity. The seed of perseverance is patience"

Progressive enhancement and rule of least power

Sat, 06 Apr 2019 00:00:00 +0000

Derek Featherstone stated:

"In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works."

Source: Simply accessible (Data attributes & progressive enhancement article)

Initial post

Wed, 03 Apr 2019 00:00:00 +0000

I picture this blog to be mostly technical but there might be some life hack bits sneaking in at anytime.

I wish to share my findings and learnings about things that I like i.e frontend development, inclusive design, Web accessibility, my editor: ViM, operating system and apps tips and tricks, bullet journaling...