DEV Community: Honza

Creating HelloWorld CLI Command with NodeJS

Honza — Wed, 23 Aug 2023 19:14:02 +0000

I have recently returned from the World Congress conference organised by WeAreDevelopers in Berlin. It's been the second time I attended and I saw some very inspiring talks. One of them caught my attention in particular. It was Phil Nash's (Sonar) talk titled 4 Steps from Javascript to Typescript. Apart from the lesson on Typescript, he was using NodeJS to create a CLI command.

Now, that's nothing unseen before, we all use various CLI commands written in JS (think npm, trash-cli, etc.), but it has never occurred to write my own. In the past, when I needed a CLI script, I wrote it in ZSH. However, one of them was getting a bit too complex that I caught myself thinking: "Next time I'll write this in another language." At Phil's talk, I had that a-ha moment. Of course, I can use JS!

The Brief

This is my first little exercise to learn the ins and outs of creating a CLI command in NodeJS. This is the brief I gave myself.

Create a CLI command that accepts zero to many arguments and displays:

"Hello world!" for no arguments.

"Hello [name]!" if one argument is provided.

"Hello [name1] and [name2]!" for two arguments.

"Hello [name1], [name2], … [nameX]!" for three and more arguments.

Pre-requisites

Node – get some recent version, 18+, it will likely work on ancient versions too, but if you have to use an old version of Node, you probably know what you're doing anyway.
PNPM – Node package manager

The Solution

TLDR;

For those of you who are results-oriented, you can find the repo on my Github account.

Create a Node package

First I've created a new Node package. Nowadays, my package manager of choice is pnpm – it's fast, more performant and takes up less space on the disk thanks to the way it deals with Node modules.

# Create and enter a new folder
take hello-world-cli
# Initialise a new Node package
pnpm init

This will create a package.json file with the basic default metadata. We will need that file for installing our dependencies.

Basic file structure

./
├── LICENSE
├── README.md
├── bin
│   └── hello
├── node_modules
├── package.json
├── pnpm-lock.yaml
└── src
    ├── cli.js
    └── greetings.js

The CLI command `hello`

First, we create the file hello: touch /bin/hello. This is gonna be the actual command that the user will launch. Make sure to make it executable chmod a+x ./bin/hello.

#!/usr/bin/env node

const { run } = require('../src/cli');
run(process.argv).catch((err) => console.error(err));

As you can see I specify the shebang to execute this file using node as an interpreter. This enables us to use JS to import the run() function from the /src/cli.js and call it asynchronously passing the array of arguments (process.argv) from the command line as its parameter. The first element process.argv[0] is read-only and is usually reserved for the absolute path of the processor (in my case: /Users/myuser/.nvm/versions/node/v20.5.1/bin/node. The second array item process.argv[1] is the path to the command we're running: /Users/myuser/Sites/_tuts/hello-word-cli/hello.

In case there's an error, I catch it and display it in the console.

`run()` – process the command

First of all, let's install yargs package to make our life easier processing all the possible parameters: pnpm install yargs. I will touch just the surface of what this package can do for you but, this is a good template even for more complex CLI commands.

This is the code in /scr/cli.js.

const yargs = require('yargs');
const { hideBin } = require('yargs/helpers');
const { showGreeting } = require('./greetings');
async function run(args) {
    const { _: names } = yargs(hideBin(args)).argv;
    showGreeting(names);
}
module.exports = { run };

I import the yargs() function and its helper function hideBin(). The hideBin(args) is a shorthand for args.slice(2). This way, you can make your command work even in not-so-standard environments like Electron.

I define the asynchronous function run(args) that takes an array as its argument. Process this argument using the yargs() and hideBin() functions.

I desctructure the _ property from the argv returned by yargs and rename this variable as names for the convenience of my code and pass the names to my showGreeting(names) function.

That's it! As far as the processing of a CLI command is concerned, we're done. The rest of it is just plain JS as usual.

`showGreeting(names)` - display the right greeting

The file /src/greetings.js serves as a library of functions related to displaying greetings.

const joinTwoNames = (twoNames) => {
    return `${twoNames.join(' and ')}`;
};

const getLongGreetings = (longListOfNames) => {
    return longListOfNames.reduce(
        (acc, name, currentIndex) =>
            currentIndex < longListOfNames.length - 1
                ? `${acc}${name}, `
                : `${acc.slice(0, acc.length - 2)} and ${name}`,
        ''
    );
};

const getGreetings = (names) => {
    const greetingsList = [
        'Hello world!',
        `Hi there ${names[0}!`,
        `Hi there ${joinTwoNames(names)}!`,
        `Hi there ${getLongGreetings(names)}!`,
    ];
    const greetingsIndex = names.length >= 3 ? 3 : names.length;
    return `${greetingsList[greetingsIndex]}`;
};

const showGreeting = (names) => {
    const greeting = getGreetings(names);
    console.log(greeting);
};

module.exports = {
    getGreetings,
    showGreeting,
};

I export the showGreeting() function as well as getGreetings() for convenience even though I don't use getGreetings() anywhere else for now.

There is a list of string templates saved in the getGreetings(names) function that is used to decide which greeting to use depending on how many names are passed as its argument.

No names? Fine, it's just Hello world!.
One name? Easy, Hi there, ${names[0]} will print the first (and only) item of the names array.
For two names, I have a helper function joinTwoNames(twoNames) that concatenates the two names in the array adding the and in between them and this is then used in the greetingList[2] string template.
Any more than three names will end up using the getLongGreetings(longListOfNames) function that will rely on the high-order method array.prototype.reduce() to concatenate all individual names with a comma as its separator apart from the last two that will be linked by the conjunction and.

That's it, folks!

I hope you found this useful, please let me know if you have any questions or comments. I intended to demonstrate in a simple and easy-to-understand way the basics of creating a simple CLI command in Node.

`allUnique()` characters – Interview Question

Honza — Mon, 06 Jun 2022 17:51:56 +0000

A few weeks ago I subscribed to Cassidy's newsletter. I have been struggling with my constantly overflowing email accounts for a couple of years now. Thus, I'm a bit picky with what I sign up for. This one is different! I love the format. I love that it is to the point whilst delivering an interesting selection of reading every week. It's witty, it's funny and it's interesting. Give it a try: have a rendezvous with cassidoo!

Task description

In each of her newsletters, Cassidy publishes an Interview Question of the week. A short code quiz for developers.

Write a function that determines if all the characters in a given string are unique. Can you do this without making any new variables? You choose if you want to include capitalization in your consideration for this one, as a fun challenge.
Example:
allUnique('Cassidy')   // false
allUnique('cat & dog') // false
allUnique('cat+dog')   // false
— Cassidy's newsletter, the 30^th of May , 2022

TL;DR

I get it, life's too short. Here are my three ways of solving the quiz:

Tests

I'll be honest. I'm still getting my head around writing tests first. This is an easy quiz with clearly defined conditions. I took it on the chin and wrote my tests first like the good boy I am! Woof! Originally, I was just going to do one solution for the quiz. As I managed to do so pretty fast, I decided to roll out a few other ways to solve the quiz. This is when I found the tests extremely handy. I didn't have to check whether my other solutions worked on not. I knew it straight away when the tests passed.

import { allUnique } from "./index";
describe("Strings of unique characters", () => {
  it("should return `false` if there are present the same characters in the string", () => {
    expect(allUnique("Cassidy")).toBe(false);
    expect(allUnique("cat & dog")).toBe(false);
    expect(allUnique("crs1138")).toBe(false);
  });

  it("should return `true` if no character is repeated", () => {
    expect(allUnique("cat+dog")).toBe(true);
    expect(allUnique("abcdefghijklmnopqrstuvwxyzA")).toBe(true);
    expect(allUnique("abcdefghijklmnopqrstuvwxyz 1234567890")).toBe(true);
  });
});

Solution 1 – the `Array.prototype.reduce()`

My primary weapon of choice was ES6 and its higher-order function reduce(). I split the string into individual characters in an array. In the callback function, I check if that character was already present in the array. If not, I added it to the acc accumulator. In the end, I compare the length of the original string and the length of the array with unique characters to decide whether to return true or false.

I use arr.splice(1) to break out from the reduce callback loop when a duplicate character has been found. arr.splice(1) mutates the original array the reduce was launched on. The mutated array has only one item and therefore the callback loop is stopped. In this case I don't mind the mutation of the array as it is only to point out a repeated character.

function allUnique(str) {
  const chars = str.split("").reduce((acc, next, i, arr) => {
    if (acc.includes(next)) {
      arr.splice(1); //break out of reduce early
    }
    return !acc.includes(next) ? (acc = acc + next) : acc;
  }, "");
  return str.length === chars.length;
}

I noticed that I'm checking twice for the presence of the next character – acc.includes(next)). A little refactor and tadaaa – here is my first result with the callback on one line:

export function allUnique(str) {
  const chars = str.split("").reduce((acc, next, i, arr) => {
    return acc.includes(next) ? arr.splice(1) && acc : (acc = acc + next);
  }, "");
  return str.length === chars.length;
}

Solution 2 – the `while()` loop

Another solution that sprung up to my mind is the classic ES5 way. Just use the while() loop, Luke!

The algorithm is pretty straight forward. Break the string into an array of individual characters. Declare an empty array for uniques and loop over all the characters. If the char is unique add it to the uniques array. If it finds a repeated character return false, otherwise after going through all of them return true.

function allUnique(str) {
  const chars = str.split("");
  let uniques = [];
  while (chars.length > 0) {
    const letter = chars.pop();
    if (uniques.indexOf(letter) >= 0) {
      return false;
    }
    uniques.push(letter);
  }
  return true;
}

I have not used the Array.prototype.indexOf() in donkey's years. It seems a bit archaic in comparison with the Array.prototype.includes(). There was no extra challenge in this solution.

Solution 3 – the `String.prototype[@@iterator]()`

It occurred to me that I could learn/practice something I don't do everyday. I went for the String.prototype[@@iterator]() method.

function allUnique(str) {
  const iterator = str[Symbol.iterator]();
  let char = iterator.next();
  let uniques = "";
  while (!char.done) {
    if (uniques.includes(char.value)) {
      break;
    }
    uniques = uniques + char.value;
    char = iterator.next();
  }
  return str.length === uniques.length;
}

First of all I create an iterator object const iterator = str[Symbol.iterator](). This object has one method iterator.next(). When called it returns the next character in the str string.

I call let char = iterator.next() for the first time declaring the character object. The object has two properties: char.value containing the value of the currently iterated character and a boolean char.done signalling whether there is another character for the iterator to go to if I was to call iterator.next() again.

I prepare my string for unique characters – uniques and start looping over checking for the current character value being already present in the string of unique characters. If that happens I break out of the loop. Otherwise, I add the character to the uniques and move on to the next one.

After the loop has finished one way or another I compare the lengths of the original string with the collected unique characters and return true if they are equal or false when they are not.

The specs for the String.prototype[@@iterator]() method are worth reading as this is a rarely used concept for many devs, myself included.

And the winner is…

So, I've got three solutions but which one is truly the best? As the truth is in the eye of the beholder, thus it depends on the definition of best. Some might argue that the first solution (reduce()) is the shortest, others could say the second solution (while()) is the easiest to read, whilst another group could vouch for the third solution being the most modern (whatever that might mean).

I decided to compare the performance of each solution. There are various benchmark tools to measure JS performance available online. I tried three that came up on my Google search results. They all have similar UI, letting me put all three solutions next to each other. I defined a bunch of shorter and longer strings, including two with all of the basic keyboard characters (one with and the other one without repetition). When I launched the test it runs each solution extensively and measure how many operations per second it was able to execute. The bigger number the better as it means fewer resources are needed to run the solution.

Results

The worst performance out of the three solutions had in all tests the while() solution. Its performance was on average around 60% lower than the most performant solution. The second-best performing solution was the reduce() function, being on average around 13% lower than the fastest solution.

And the winner is, drum roll… The iterator solution!

It needs to be said that the iterator solution started to outperform the other two once the break-out condition was added to the equation. Before that, it had surprisingly poor results. My conclusion is that the iterator is worth learning but I shall run performance tests for individual use cases.

Cover image Shoe Paisley by Emma Plunkett

My favourite learning resources for web developers

Honza — Mon, 04 Apr 2022 15:52:18 +0000

Recently, a discussion about learning subscription broke out on the Learning in Public platform. This nudged me to sum up some of my favourites. I hope you find them inspiring. I'd be thrilled if you take the time to write your chosen ones in the comments.

A handpicked list of resources I found useful. They are in no particular order.

Courses

Wes Bos' courses In general high quality video courses on various topics (many of them focusing on JS).
LevelUp Tutorials Scott Tolinski's project, he has a great delivery in his video courses. His business model is slightly different from Wes'. You pay a monthly fee and get access to all his courses. Scott is prolific author whilst maintaining a good quality.
Frontend Masters Delivers what it says on the box – videos. I especially appretiated the courses made by Kyle Simpson.
Sitepoint Premium A multitude of various video courses and books. I bought a lifetime membership when it still was called Learnable and it was one of the best investments into my self-education I made.
Codecademy One of the first interactive course platforms I stumbled upon around 2012(?). They're still great, even better.
Learn Git Branching An interactive course that will let you try all the git commands without the fear for breaking anything. It has a nice visual representation. I learned to navigate the commit tree thanks to this course.
Webpack Learning Academy After these free video courses, Webpack started to make some sense.
Free Code Camp Interactive course platform and community. I really like this for its noble values – providing programming courses – and the quality is also pretty good.
Crypto Zombies This is kind of funny, but I guess a good intro into blockchain programming.

Books

Clean Code, Robert C. Martin Series This book showed me how to write code which is easier to understand. Since we started applying the principles outlined in this book on our team, the understanding of code in between developers became a breeze. Uses Java syntax for examples.
You Don't Know JS, Kyle Simpson I came across this series when I already had pretty solid knowledge of Javascript. Or at least so I thought! These books go into the inner workings of the JS engine and explain how it actually works. The first version was so good that I happilly supported Kyle in his effort to write and publish the second edition.
CSS: The Definitive Guide, Eric A. Meyer This book was hard to read as it's essentially a reference guide with explanations. BUT it was this book that gave me the understanding of how the CSS box model works.
The Coding Career Handbook, Shawn @swyx Wang Another great book. Swyx collected his tips based in a wide spectrum of knowledge from the IT industry.
Pure React, David Cedia David taught me to think React. This deffo helped me to understand how React works. I recommended this book to all my collegues and it really shows who read it and who did not.
ECMAScript 2015: A SitePoint Anthology A collection of articles about Javascript ES6.
Jump Start Git, Shaumik Daityari A consise description of what Git is and how to use it.
Professional Git Quoting the classic: "We gotta go deeper!" This is an indepth look into using Git.

Talks, presentations and podcasts

Git for a four year old The inner workings of git. This is a must-watch!
Ladybug Podcast Emma Bostian, Sidney Buckner, Kelly Vaughn and Ali Spittel – four women in tech sharing their experiences. These seasoned web developers discuss hot technologies, advices for beginners and much more.
Syntax.fm Wes Bos and Scott Tolinski team up to create this gem of a podcast. They present the newest trends, their personal expertise based on years of teaching web development and invite interesting guests to discuss their products and fields of expertise.
Gutenberg Times The official Wordpress podcast dedicated to spreading the Word of our Lord Gutenberg 🤣 I get to know about the latest addition to the Gutenberg plugin as well as what got integrated into the WP core and what direction is the developement going.
The Swyx Mixtape Swyx's short interviews with interesting developers.

Cover image: Café con Leche by Emma Plunkett

A NodeJS application calling a 3rd-party API

Honza — Fri, 25 Mar 2022 21:16:29 +0000

This article aims to sum up my learning from developing and deploying my first NodeJS application. The idea is that I need to access somebody else's server to receive information. The communication with the server is only possible through a security token which I don't want to reveal to the visitor of my front-end.

TL;DR

You can see the app in action at my node-api-call.heroku.com. It should work as long as Aztro – the 3rd-party API is still functioning. Either way, you're welcome to have a look at my code at my Github repo – node-api-call.

What I wanted to achieve

Fig. 1 – Communication diagram between visitor's browser our server and the 3rd-party API

The diagram above can be read as:

Visitor of the webpage submits the input data and the browser sends a request to my server-side application running on the Heroku platform
My application decides the browser's request requires sending a request to the 3rd-party API, attaching the API's authentication key.
The 3rd-party API answers the request with a response.
My app processes the response and answers to the browser.
The browser receives the answer and processes it.
If the answer is correct the browser will display the horoscope for the requested day and Zodiac sign.

Prerequisites

Install NodeJS locally; I use the NVM (Node Version Manager). I'm using the Node@v16
Create a Heroku account – optional, you can use Vercel or any other Node platform out there
Create a RapidAPI account and register an app based on the Aztro API
I presume you have a basic knowledge of Javascript, HTML, CSS and know how JS works in the browser.
I expect you to know how to use Git and to have your own Github account and know how to interact with it.

What have I learned

Axios – a promise based HTTP client for NodeJS.
ExpressJS – a NodeJS web application, this is the server and a router, processing visitors' requests and providing their browsers with responses.
Dotenv – a module that loads environment variables into process.env.
hbs – ExpressJS view engine for handlebars.js
Heroku – a platform that let me publish my NodeJS application to the world.

Step 1: Axios – fetch the data from the remote API

See the axios branch.

My first goal was to get my NodeJS to communicate with the Aztro API.

Even though NodeJS has announced the arrival of Fetch API to its v17.5 as an experimental feature, the popular way of fetching HTTP requests is undoubtedly using Axios.

To achieve this goal, I created a new Git repo, linked it with Github.

Then I initialised a new Node Package Module with the default values npm init --yes. You can always edit them later on.
Installed the Axios and Dotenv packages npm install axios dotenv.
Created the basic file structure.
Added the .env file containing the RAPIDAPI_KEY. I also added the .env file to the .gitignore so the token is not made public. Use your own instead.

RAPIDAPI_KEY=2d7d***...***8037

At this point my app had the following structure:

.
├── .env
├── .gitignore
├── package-lock.json
├── package.json
└── src
    ├── app.js
    └── astrology.js

The src/app.js contains the code necessary for importing the src/astrology.js, creating and calling the asynchronous call of the call to the Aztro API.

// src/app.js
require('dotenv').config()
const HoroscopeAPI = require('./astrology')

const asyncApiCall = async () => {
        const response = await HoroscopeAPI.getHoroscope('gemini', 'today')

        console.log(response.data)
}

asyncApiCall()

To test the app so far, you can launch node src/app.js. Note that the initiation of the require(dotenv).config() needs to come before requiring the src/astrology module otherwise the value of RAPIDAPI_KEY won't be available to the code responsible for communicating with the API.

Note:
Dotenv loads the environment variables that are stored in the .env file in the root of the project. You might have noticed that this file is not included in the repository. That's right. I configured Git to ignore that file and that is where my project-specific secrets are kept. In this case, the secret is the RAPIDAPI_KEY. I subsequently set the value of this variable on the server hosting the staging and production versions of the web app.

// src/astrology.js
const axios = require('axios')
const BASE_URL = `https://sameer-kumar-aztro-v1.p.rapidapi.com/`

options = {
        method: 'POST',
        url: BASE_URL,
        params: { sign: 'gemini', day: 'today' },
        headers: {
                'x-rapidapi-host': 'sameer-kumar-aztro-v1.p.rapidapi.com',
                'x-rapidapi-key': process.env.RAPIDAPI_KEY,
        },
}

module.exports = {
        getHoroscope: (sign, day) => axios(options),
}

Notice the hardcoded values for the API call where

options = { ...
  params: { sign: 'gemini', day: 'today' }
  ...
}

If everything works as it's supposed to then you should see something like this in your terminal.

{
  date_range: 'May 21 - Jun 21',
  current_date: 'March 20, 2022',
  description: "You're an open book these days and anyone who stops to read your pages better be prepared for the unbridled truth. Some will admire your frankness, while others might be shocked.",
  compatibility: 'Taurus',
  mood: 'Truthful',
  color: 'Navy Blue',
  lucky_number: '54',
  lucky_time: '2pm'
}

Step 2 – The application serving UI to the visitor and processing their requests

See the basic-app branch.

Well, I have the axios() part working. It's time to move on to the next step – creating an app that processes requests that come from visitors' browsers and provides them with a user interface.

I've refactored the code, giving the src/app.js more of the prominent encompassing role whilst moving the other code around to src/utils/astrology.js and for Handlebars based templates into the src/templates/ folder.

You can see the refactored structure in the following diagram:

.
├── .env
├── .gitignore
├── package-lock.json
├── package.json
├── public
│   ├── css
│   │   └── styles.css
│   └── js
│       └── app.js
└── src
    ├── app.js
    ├── templates
    │   ├── partials
    │   │   └── header.hbs
    │   └── views
    │       ├── 404.hbs
    │       └── index.hbs
    └── utils
        └── astrology.js

ExpressJS

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

I've decided to use ExpressJS to help me with responding to the requests coming from the visitor's browser as well as launching the Axios requests to the Aztro API. It is pretty much my first deployed interaction with ExpressJS, so I am no expert, but it seems reasonably straightforward and well documented. I guess that's one of the reasons why it's so popular.

I have implemented the following responses to what the visitor might try to do:

A general request to the homepage: /
A POST request submitted by the form on the generic app's page /horoscope
Anything else – * – should produce a 404 error

The application setup

First, I instantiate the ExpressJS app and tell it to parse incoming requests as JSON.

// src/app.js
// Create the app
const app = express()

// Add JSON parsing middleware
app.use( express.json() )

Handling the Handlebars templates

Next, I set up the app to handle serving the responses to the browser using the Handlebars (hbs) view engine.

// src/app.js
// ...
// Define paths for the HBS config
const viewsPath = path.join(__dirname, './templates/views')
const partialsPath = path.join(__dirname, './templates/partials')

app.set('view engine', 'hbs')
app.set('views', viewsPath)
hbs.registerPartials(partialsPath)

// Setup static directory to serve
app.use(express.static(path.join(__dirname, '../public')))

I set the default view engine to 'hbs'. This will enable me to render the .hbs files when the response.render() function is called using Handlebars.

I tell the ExpressJS app where to look for the Handlebars views. There are only two views for this app – index.hbs (for the rendering of the app) and 404.hbs (this is used to render any other route as a 404 error page). I pass the path to these views to the views property of the ExpressJS app.

Next, I let the hbs know where to look for all the template partials, passing their path to the hbs.registerPartials() function. In our case, the only partial so far is the header.hbs.

App's routing

The first route is for the index page that will be shown to visitors when they access the app. The app.get(path, callback) function tells our app when a GET request comes to react with the callback middleware. For my purpose, the response is to render the index view with the title variable being set to Horoscope.

// src/app.js
// ...
// Create base URL route "/" and render index view
app.get('/', (request, response) => {
    response.render('index', {
        title: 'Horoscope',
    })
})

The second route is the one that I shall use for processing the API request. The route is /horoscope and it matches the request's route defined in the fetch call from the frontend JS located in /public/js/app.js. This request carries data in the format of JSON made out of an object with two properties: sign and day.

// src/app.js
// ...
// Response to the POST request made by submitting the app's form
app.post('/horoscope', async (request, response) => {
    const { sign, day } = request.body

    if (!sign || !day) {
        return response.status(404).send({
            error: 'Please provide all details',
        })
    }

    try {
        const horoscope = await HoroscopeAPI.fetchHoroscope(sign, day)

        const { data } = horoscope
        return response.json({ data })
    } catch (err) {
        console.error(err)
        return response.status(500).json({
            error: 'Something went wrong on the server side',
        })
    }
})

Destructuring the sign and day properties from request.body, making sure they are defined, I try to call the asynchronous function that I developed in the first step.

I moved the code into its own partial /src/utils/astrology.js – very handy if there was more than one method to interact with the Aztro API.

Have a look for yourself as I adapted the structure a little bit to make it work as a self-contained JS module providing the HoroscopeAPI.fetchHoroscope(sign, day) method. This method creates a closure over the Axios call making sure we can pass the sign and day variables and sets the remaining necessary options (url, method, request's headers).

// /src/utils/astrology.js
const axios = require('axios')
const BASE_URL = `https://sameer-kumar-aztro-v1.p.rapidapi.com/`

module.exports = {
    fetchHoroscope: (sign, day) => {
        const options = {
            method: 'POST',
            url: BASE_URL,
            params: { sign, day },
            headers: {
                'x-rapidapi-host': 'sameer-kumar-aztro-v1.p.rapidapi.com',
                'x-rapidapi-key': process.env.RAPIDAPI_KEY,
            },
        }
        return axios(options)
    },
}

And last but not least is the route for any other requests. This is to respond to such requests with a 404 error page.


// Catch all route, renders 404 page
app.get('*', (request, response) => {
    response.render('404', {
        search: 'page',
    })
})

After that, the only thing left to do is set the web server's port and let the server listen for incoming requests.

// Initialize application port
const port = process.env.PORT || 3000

app.listen(port, () => {
    console.log(`Server is up on port ${port}`)
})

Shortly about the frontend (read browser) Javascript

All the static code intended for the use in visitor's browser can be found in the /public/css and /public/js folders. I presume that is nothing too new for you and thus I shall focus only on the part that actually sends requests to the server.

    fetch('/horoscope', {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json',
        },
    })
        .then((response) => {
            return response.json()
        })
        .then((response) => {
            console.log({ response })
            const { data } = response
            results.textContent = data.description
        })
        .catch((err) => {
            results.textContent = err
        })

The request is sent the /horoscope path as mentioned above. The body of the request is a JS object converted to the textual representation of JSON. I tell the server that the body is in that format by providing the 'Content-Type': 'application/json' header. The fetch() function returns a promise with a response and when this resolves the response.json() returns a promise that resolves into an object with the data property. That explains the need for the chain of then() methods. If you're not sure how this works, I recommend you use console.log() to reflect on the sequence of the two promises and what results they provide.

Please notice, as soon as the form is submitted, I display the 'Loading…' text that is then replaced with the response from the server. This can be either the results received from Aztro API or a generic error message in case of any problem the server might experience.

Cover image Fishy Fish by Emma Plunkett Art

Gutenberg cheatsheet – Block's `supports` property

Honza — Mon, 21 Mar 2022 17:12:23 +0000

Gutenberg's documentation has come a long way and it's getting better and better. However, now and then I find myself missing a quick overview of the properties. Thus the idea of a cheatsheet…

Here's a short overview of the individual properties of the supports object for details refer to developer's documentation:

anchor - boolean: false. It doesn't work with dynamic blocks (yet).
align - boolean/array: false No default alignment is assigned. If you need to set a default value, declare the align attribute with its default.
alignWide - boolean: false Disable wide alignment for a single block.
className - boolean: true By default, the class .wp-block-your-block-name is added to the root element of your saved markup.
color - Object: null This value signals that a block supports some of the properties related to colour. When it does, the block editor will show UI controls for the user to set their values.
customClassName - boolean: true Controls whether the field for custom class name is displayed in the panel inspector.
defaultStylePicker - boolean: true When the style picker is shown, the user can set a default style for a block type based on the block’s currently active style.
html - boolean: true By default, a block’s markup can be edited individually.
inserter - boolean: true To hide a block so it can only be inserted programmatically, set the inserter: false.
multiple - boolean: true If you want a block to be inserted into each post only once.
reusable - boolean: true You can prevent a block from being converted into a reusable block.
spacing - Object: null You can enable some of the CSS style properties related to spacing. Good for margin and padding overrides, if the theme declares support. Subproperties:
- margin - boolean/array: false
- padding - boolean/array: false
typography - Object: null When enabled, the block editor will show a typography UI. Subproperties:
- fontSize - boolean: false
- lineHeight - boolean: false

The values of the attributes added by the supports object will be added to the object returned from the useBlockProps() hook.

Within the Edit function:

function Edit() {
    const blockProps = useBlockProps();
    return (
        <div {...blockProps}>Lorem ipsum</div>
    );
}

Save function:

function Save() {
    const blockProps = useBlockProps.save();
    return (
        <div {...blockProps}>Lorem ipsum</div>
    );
}

For dynamic and server-side rendered blocks these extra attributes can get rendered in the render_callback in PHP using the function get_block_wrapper_attributes(). It returns a string containing all the generated properties and needs to get output in the opening tag of the wrapping block element.

function render_block() {
    $wrapper_attributes = get_block_wrapper_attributes();
    return sprintf(
        '<div %1$s>%2$s</div>',
        $wrapper_attributes,
        'Lorem ipsum'
    );
}

Cover image by Emma Plunkett – The Missing Peace

Gutenberg – Block Deprecation

Honza — Mon, 14 Mar 2022 21:42:19 +0000

When you start writing your own Gutenberg block, it's just a matter of time that you will write a new version of a block. You might be wandering what that means for your existing content. What will happen when you change the structure returned by the save() function of the block? The devs behind the Gutenberg project thought about this too. There is a mechanism that will mark the affected blocks, saying: "This block contains unexpected or invalid content." and if you have a peek in the JS console you might get a heart attack – so many errors! 😀

An example of the error of a deprecated block.

Personally, I'd rather skip over the most painful possibility of solving this – revision of all your content where the upgraded block appears and attempting the block recovery. This leaves you with two remaining strategies how to address this:

Create a new block with a different name and start using that.
Define a deprecate version of the blocks and allow users to edit them using their new version.

How does the deprecation actually work

I find it helpful to understand the order of execution what Wordpress does when the editor notices that the DOM structure produced by the new version of the blocks save() function doesn't match the one saved in the content. Here is what happens on the save side (pun intended) when editor comes across a block:

Read all the attributes and run the block's save() function and compare its result to the block's content saved on the page. Do they match? No?
Look for the deprecation array and iterate the attributes and save functions stored in these. The important gotcha here is that the array is not sequence list. The results of one deprecated version are NOT passed to the next one. Each deprecated version is evaluated independently in the order left to right as they are listed in the array. If the results of the save function do not satisfy the requirements, the editor moves onto the next one. If none of them can produce a satisfactory result, the Attempt Block Recovery overlay is displayed and errors are printed in the JS console.
When a fit is found, editor looks for migrate function. This is especially handy when the <Innerblocks /> are involved. This function lets the developer to handle changes to the attributes and/or to create a new structure of the inner blocks then pass these to the new (current) version of the block's save function.
The values of the attributes and the template of inner blocks are passed to the new save function and a new content is saved when the page is updated.

Structure of the deprecated version of a block

Every single deprecated version of the block is an object. This object has the following structure and you don't have to provide all properties.

const v5_0_0 = {
    attributes: {
        // the structure of attributes as they were defined in the 
        // deprecated version
    },
    supports: {
        // the supports definition of the deprecated block
    },
    save({attributes, innerBlocks}) {
        // just recreate the DOM structure with content provided by 
        // the block attributes of this version of the block
    },
    migrate(attributes, innerBlocks) {
        // this function receives old attributes and inner blocks and
        // returns either attributes or an array [attributes, innerBlocks] 
        // to be used in the current block version
    },
    isEligible() {
        // If the function returns true, this deprecated version will be used.
        // Use this if the block is technically valid but you need to update 
        // its attributes
    }
}

`attributes` object

The attributes of the deprecated form of the block. The amount of attributes can change quite dramatically. When we refactored our Testimonial block the new version was using a template made out of the core/paragraph blocks as the inner blocks of the my-plugin/testimonial block. The previous version of Testimonial was relying on the RichText component and storing their values in attributes name, position and comment. Each inner block handles its own attributes so suddenly there was no need for our block to handle these.

// excerpt from the deprecated version of the block.json
// for my-plugin/testimonial
{
    // ...
    "attributes": {
        "position": {
            "type": "string",
            "source": "html",
            "selector": ".my-plugin__position"
        },
        "comment": {
            "type": "string",
            "source": "html",
            "selector": ".my-plugin__comment"
        },
        "faceOption": {
            "type": "string"
        }
    }
    // ...
}

The new version was left with just the attribute storing the value defining the image of the author of the testimonial.

// excerpt from the block.json after the refactor
{
    // ...
    "attributes": {
        "faceOption": {
            "type": "string"
        }
    }
    // ...
}

`supports` object

The supports (object) definition for the deprecated form of the block. The property supports is one to pay a closer attention. This is not inherited from the new version. If it is not defined it has the default values as described at WP dev's documentation. Not being aware of this can lead to a hair loss due to unexpected behaviour. My deprecation save() function was getting the block's class name even when I explicitly took out any dynamic code for the classes.

// Let's call this block my-plugin/box
const deprecated = [{
    save() {
        return (
            <article className="">Lorem ipsum</article>
        );
    }
}];

This was producing the following code:

<article class="wp-block-my-plugin-testimonial">Lorem ipsum</article>

Needless to say, it took me a while to arrive to such simplified use-case. Imagine how perplexed I was when I explicitly set the class to be an empty string and the block's default class name still appeared. And this was the only thing that would make this deprecation to be skipped. The solution is in disabling the blocks class name in the deprecations supports property.

const deprecated = [{
    save() {
        return (
            <article>Lorem ipsum</article>
        );
    },
    supports: {
        className: false
    }
}];

`save( props )` function

The save implementation of the deprecated form of the block. The editor parser uses this function to compare its result with the stored content and in case it matches it will attempt to use this deprecated version of the block. It will then look into the attributes of that version and will try to use or migrate these with the new version of the block. Other than that it works the same as the usual block's save() function.

`migrate( attributes, innerBlocks )` function (optional)

As I mentioned above this function will run only if the deprecated version of the save() function produces a valid block. You need to make sure that all the deprecated version have their own migrate() if it is relevant for the upgrade of the block.

In the case of our testimonial block the migrate() function takes the old attributes and the old inner blocks and returns values for the new version of attributes and inner blocks.

migrate( attributes, oldInnerBlocks ) {
    const cleanedUpInnerBlocks = oldInnerBlocks.map((innerBlock) => {
        const { attributes } = innerBlock;
        // remove all the old inner block's classes and replace them with my class name
        const newAttributes = { ...attributes, className: 'my-plugin__name' };
        return {
            ...innerBlock,
            attributes: newAttributes,
        };
    });

    const newInnerBlocks = [
        ...cleanedUpInnerBlocks, // the previous version happened to use an innerBlock for the testimonial author's name
        createBlock('core/paragraph', {className: 'my-plugin__position', content: oldAttributes.position}),
        createBlock('core/paragraph', {className: 'my-plugin__comment', content: oldAttributes.comment})
    ]
    return [attributes, newInnerBlocks];
}

`isEligible( attributes, innerBlocks )` function (optional)

This function will be called on every valid instance of the block. It can be useful, if you need to use a deprecation even though the result of the save() function matches the saved content. Think, for example, of a change in the attributes structure whilst the output returned by the save() functions remains the same.

Also, because it is called on every single valid (new) instance of the block, it is better to optimise for the false condition by performing a naive, inaccurate pass at inner blocks. Only when the fast pass is considered eligible is the more accurate, durable and slower condition evaluated.

A good and commented example of using the isEligible() function is the deprecation of the core/columns block.

Cover image: Moorish Archways by Emma Plunkett Art

Create A File Structure For React Components Using Xargs Command

Honza — Tue, 23 Mar 2021 21:33:40 +0000

When I need to quickly knock up a bunch of React components, I like to use my command line. This is how I create a directory structure, where each element has its own folder. Let's say I want something like this:

my-web-app/src
├── App
│   └── App.jsx
├── CtaButton
│   └── CtaButton.jsx
├── CurrencyBar
│   └── CurrencyBar.jsx
├── Discount
│   └── Discount.jsx
├── DomainForm
│   └── DomainForm.jsx
├── DomainInput
│   └── DomainInput.jsx
├── Header
│   └── Header.jsx
├── RadioButton
│   └── RadioButton.jsx
└── Results
    └── Results.jsx

I'd go to the src folder:

cd my-web-app/src

Create all folders:

md App CtaButton CurrencyBar Discount DomainForm DomainInput Header RadioButton Results

And then run the following command to create all the JSX files within their folders, keeping the same name as the folders.

find . -type d | xargs -I{} basename {} | xargs -I_ touch _/_.jsx

Cover image: Variegated Aerialist, Emma Plunkett Art © 2019

How do you use the `` component in Gutenberg development?

Honza — Fri, 24 Jul 2020 06:54:52 +0000

I'm trying to develop a custom CTA button component that will be used in all of our custom Gutenberg blocks. I'd like the authors to be able to click on the button in the editor and change the button text, URL (with option to search the existing posts/pages/CPTs/…) and set the target and rel attributes. I've been playing around with URLInputButton, URLPopover and eventually stumbled upon LinkControl, but I just can't get it to work at all. The documentation doesn't provide any example of its use either. Does anybody here knows?

// A simplified example showing what I've been trying so far…
function edit( props ) {
    const { attributes: { btnText, url }, setAttributes } = props;
    return (
        // <ButtonGroup className={`flex cta`}>
        //     {/* <Button url={`#url`}>
        //     </Button> */}
        //     <Button url={url} >
        //     <PlainText
        //         placeholder={ __(`Calling to act`, cvslug) }
        //         value={btnText || `Click`}
        //         onChange={ (newText) => setAttributes({ btnText: newText }) }
        //     />
        //     </Button>
        //     {/* <URLInputButton
        //         url={ url }
        //         onChange={ (url, post) => setAttributes( { url, btnText: (post && post.title) || `Click here` } ) }
        //     /> */}
        // </ButtonGroup>
        <LinkControl />
    );
}

===
Photo by Matt Collamer on Unsplash

My story as a web developer – How I landed my job

Honza — Fri, 19 Jun 2020 07:15:17 +0000

This is the third part of my story about my journey toward becoming a web developer. Part one covers my first timid steps and part two is about my experience as a freelancer.

I felt my learning accelerate when I eventually started working with various other developers and individuals, as well as small teams.

I need to find some work

Working with other developers positively reflected on my skills because I was being exposed to more complicated problems. However, my growth as a developer came at a price - I didn't have time to put into being an entrepreneur. If other people were in charge of the business part, I could focus on coding. If I'm completely honest with myself, I still prefer it that way. I do like my clients and I've always done my best to maintain a friendly yet professional relationship with them. My problem was that I found all the business and admin side of running things very distracting from what I am actually really interested in doing - programming. All the socializing, listening to their ideas of how they want to run their online business, trying to make sense of how they could achieve their goals, suggesting solutions, contracts, etc… I found that all quite boring.

During the second half of the summer of 2019, my co-worker and (much as she hates that word) boss (in one person), Ippy, told me that some of her projects had been cancelled and Netuxo wouldn't have any work for me until late autumn or even the end of the year - I was unprepared. We'd just got back from a road trip around the EU, which cost us a bit more than we anticipated. The little savings we had left were quickly dwindling.

Are we moving to Letterkenny in the north of Ireland? Photo by Trevor Cole on Unsplash

Letting go of my own business of 12 years was still a huge step to take, I had built it up from scratch alongside my wife but I’d known for a while that I needed to work as part of a bigger team, to stretch myself. Most of the work we'd been attracting just wasn’t challenging enough.

I made sure Ippy knew I was looking for work elsewhere. I started looking at my options - the original idea was to work remotely. I turned to various online agencies such as Toptal, Honeypot and Ciklum but they didn't work out that well for me. I struggled with their hiring process, something that would later become clear, that it's a pattern in the IT industry… but more on that later.

I started looking at jobs online. At first, within the Granada province but there weren't many listed. I'd registered with a bunch of online job portals such as LinkedIn, Glassdoor and the Spanish Tecnoempleo. I'd also sent out a few emails to my peers, asking them if they knew of any job openings and to keep their ear to the ground for me.

Curriculum Vitae

The first step to being able to apply to all the various jobs I found advertised online was to make my CV. I was keeping my LinkedIn profile more or less up to date. I exported a PDF and sent it out to a selection of the jobs that seemed interesting to me - I didn't get a single response!

Ireland is stunning but the weather can be very miserable. I just know I wouldn't last there, I need sunshine to be happy. Photo by Anne James on Unsplash

How could I make my CV better? I found the r/resume sub-reddit quite useful. One can post a resume there and people, including HR professionals, give you feedback - it's free! You may get contacted by a couple of professionals that watch that subreddit and use it to fill their funnel with potential leads but that’s ok, they are usually not too pushy and quite nice to talk to. Another little gem that came out of it, is the CV tool called Resume Worded. Their app lets you upload a CV in TXT or PDF, as well as import it from LinkedIn, it then runs an analysis of various aspects providing you with a detailed report of all the areas you should work on to improve your chances - I was only using the free version. After about 17 different attempts, I settled with a score of over 85%. I felt I was ready for my next round.

I was still hoping to find a remote job because I didn't really want to leave the area. It was the first time in 15 years that we'd found a Spanish community that accepted us. I'd made real friends and felt really settled. However, I was getting increasingly more pragmatic about my whole situation because the opening positions were somewhat sporadic or offered really mediocre conditions. I broadened up my search radius to the whole of the EU except for the UK, as they were about to leave the Union.

Shameless plug and a spoiler at once: Funny enough my new job spins around CVs. What a coincidence! 🙂 I feel obliged to recommend you our product – Resume Coach as I am convinced that it provides a great value for a reasonable price. Go and check it out.

I sent out so many applications that I lost count. I must have been doing something right because the HR people noticed me and started scheduling interviews.

I was trying to imagine our life in Brussels. Photo by Raphaël Biscaldi on Unsplash

Job interviews

If there's anything that can trigger my imposter syndrome, then it's the system that the 3rd party HR companies use to evaluate a candidate for a position. The vast majority of the technical interviews are done using a platform like Codility. A good place for training for the technical interviews are also Code Wars or HackerRank. These are all quite straight forward, my problem is the way the HR teams prepare the interviews. Mostly, I was applying for frontend or full-stack positions but the technical interviews were not actually testing my ability in these fields of expertise. The tests were based on my knowledge of slightly advanced mathematics, something I knew but had last used when I was in the first or second year of my university studies. I hadn't needed a matrix or converging series since those days and all I remember is that they exist. I know where to find them if I ever need to learn them again, which is fine if I'm not in a timed technical interview exercise. Often, I found myself spending 90% of the allocated time on a quick math refresher and then just ran out of time for creating the algorithm and coding. You can just imagine how I felt after a couple of days filled with rejection after rejection, knowing full well that I wouldn't be against any of those problems (from the test) in a real-life job scenario.

There were exceptions amongst the companies, some were a bit less interested in knowing whether they're hiring a good mathematician and did seem more interested in finding someone who is a good fit for the actual job vacancy they were trying to fill. Some of them, like for example Leadtech, would give me a well-prepared brief for the test exercise and a reasonable amount of time to complete the task at hand. They asked me to develop a frontend module with well-specified requirements, wireframes and graphic elements supplied by a graphic designer in InVision.

Starting from the zero in a country I can't speak their language as a freelancer? I think that would be a bit too much of a challenge in my 40s. Photo by Luiza Giannelli on Unsplash

After all these pointless boring mathematical quizzes, this kind of exercise was a pleasure to sink my teeth into. I made sure I over-delivered. I made a git repo, split the task into features and commented on my code, created a changelog, readme file and sent it back. In the third round of the interviews, whilst talking to the head of the frontend department and his superior, they asked me if I always give this level of attention to details. I said: “Absolutely! If the time allows me to do so." 😁

Accepting the right offer

Within a week or two I ended up with three solid offers. One in Letterkenny in Ireland, another in Brussels. Both of these well-paid gigs based on Drupal and related to projects of the European Union. The third one was Leadtech based in Barcelona.

I couldn't contemplate living in the north of Ireland. My happiness is a function of sun exposure with a positive coefficient. The money they offered was good but deep inside, I knew I wouldn't last there for long.

Should we go to the rainy Ireland? Or face the language barrier in Belgium? Or the sunny Barcelona? Photo by Benjamín Gremler on Unsplash

Brussels is slightly better weather-wise, the money, they were offering, was significantly superior. But there were buts… I would be working as a freelancer and the costs of living in Belgium is known to be enormous. I can't speak any French or Flemish – it was just a bit too much of a change.

All in all the only viable option seemed to be Barcelona. After a week or so of weighing my options, I accepted their offer. I did make a rather embarrassing hiccup while accepting the offer though. The majority of the job ads do not advertise the salary, for obvious reasons. That's in case the candidate asks for less than they're ready to pay. So, it's sort of a negotiation game. The differences in salaries between different parts of Spain can be quite substantial. I hadn't kept any precise records of my talk with the HR people, so when I said, "Yes" to the offer, I accidentally asked for more money. There was an awkward silence on the other side of the phone and then the lady told me that she will have to speak about that with her colleague, the one who did the initial interview with me. Her colleague got back to me straight away and I could tell she wasn't very happy about my sudden extra demand. The difference was not too big and I'd already said, "No" to Letterkenny and Brussels - so I conceded.

It all felt rather sudden. I mean, I knew this was a likely outcome, yet until I'd said, "Yes!" I wasn't actually believing it. So then, here I was going to Barcelona in a month or so. That's when it dawned on me - it wasn't just about me. My very supportive wife, with whom I consulted everything every step of the way, even before I started looking for a new job - I'd kept her updated on each and every possibility. One day she was daydreaming about the west coast of Ireland with me, then we were Googling different zones to live in Brussels and then we were musing on how Barcelona had changed over the years - she took it all rather calmly (luckily she’s always up for an adventure).

Barcelona, they've got Czech beer on tap? I think this is settled! Photo by Alana Harris on Unsplash

It was happening – we were going to Barcelona! And in the midst of all this, yet another offer came in. A big international bank was looking for someone to join their team in Madrid. The team that was taking care of their Czech branch and they even said, "Yes" to me when I asked for more money. They were talking about a couple of business trips to Prague every year, so I could see my family. That was a tough call to make.

I have been to Madrid a few times before. Once in the summer and twice in the winter. The winter visits were miserable. Coming from a mountainous region in Czech, I'd like to say that I've seen enough snow for the rest of my life. I'd already said, “Yes" to Leadtech, plus they were really nice to me and I’d enjoyed that very well prepared technical examination. My wife has a philosophy, she claims that we don't actually need to make any decisions in our lives, in due course we simply arrive at a point in time when things become obvious. In this case, the direction I should take – Barcelona, here I come!

Header image: The Road Home, Emma Plunkett Art © 2014

Jamstack Virtual Conference 2020

Honza — Wed, 27 May 2020 17:52:59 +0000

What is your favourite talk so far?

I really enjoyed the COVID-19 one and the one about emerging markets in Africa. What about you?

Hop in – https://hopin.to/events/jamstack-conf-virtual

Curriculum Timeline – Stylus (CSS) Tutorial

Honza — Sun, 10 May 2020 17:17:19 +0000

Recently, I came across a need to display a list of artist's exhibitions in a sidebar on a webpage. I wasn't quite satisfied with the styling of the presentation I had at hand at the time. That lead me to write a snippet of code you'll find in this tutorial. I wrote it in Stylus and HTML. Click on the View Compiled button to see the compiled CSS.

The Curriculum Timeline – grab the code

For those of you, who just wanna see it in action or just get the final code, here it is…

Default settings and variables

$bgColor   ?= #ffffff
$txtColor  ?= #444444
$linkColor ?= #ec008c

The basic structure

AS you can see, in the code above, the actual timeline HTML is made of the following parts:

<!-- The actual timeline HTML starts here -->
<div class="timeline tm">
  <!-- listing of the individual years -->
  <div class="tm__year"> … </div>
  <div class="tm__year"> … </div>
  <div class="tm__year"> … </div>
  <div class="tm__year"> … </div>
  <!-- the actual vertical line representing the timeline -->
  <div class="tm__line"></div>
</div>

This is pretty straight forward. The idea is an encapsulating block .tm that has its property position: relative to provide a point of reference for the vertical line .tm__line which is positioned absolutely. The .tm block also displays all the .tm__year elements. I shall mention these in more detail later.

.tm
  min-height: 100vh
  position: relative

  /* The vertical line symbolizing the timeline */
  &__line
    position: absolute
    /* defines the width of the vertical line */
    width: 2px
    top: 0
    bottom: 0
    left: 100%
    transform: translateX(-5rem)
    background-color: lighten($txtColor, 80%)
    z-index: -1

The structure of the individual year elements and their labels

Each of the .tm__year elements is made of an unordered list of the exhibitions that the artist participated in that year and a label for the particular year.

<div class="tm__year">
  <div class="tm__label">2018</div>
  <ul class="tm__events">
    <li class="tm__event"> … </li>
    <li class="tm__event"> … </li>
    <li class="tm__event"> … </li>
  </ul>
</div>

The formatting of the .tm__year makes each one of them position: relative; to set a reference point for the .tm__label element that is positioned absolutely. The label uses a set of text-shadow properties to create the illusion of the text outline.

  /* Definition of the year elements */
  &__year
    position: relative
    min-height: 10rem
    margin-top: 3rem
    &:first-child
      /* making sure the first year sticks to the top */
      margin-top: 0

  &__label
    color: rgba($txtColor, 0.3)
    color: $bgColor
    font-family: 'PT Serif', serif;
    font-weight: bold
    font-size: 4rem
    line-height: 1
    transform: rotate(-90deg)
    transform-origin: 100% 0
    position: absolute
    top: 0
    right: 4.75rem
    max-width: 16rem
    text-align: right
    text-shadow: -1px -1px 0 rgba($linkColor, 0.6),
                  1px -1px 0 rgba($linkColor, 0.6),
                 -1px  1px 0 rgba($linkColor, 0.6), 
                  1px  1px 0 rgba($linkColor, 0.6)

The actual list of exhibitions

There is nothing really special about the unordered list of exhibitions for each year. Each exhibition element consists of its heading and description.

<ul>
  <li class="tm__event">
    <h2 class="tm__event__heading">Ceramiq, Órgiva, Spain</h2>
    A cyanotype exhibition.
  </li>
  …
</ul>

The actual styling of the list, its items and their headings

  &__events
    /* Sets the right edge of the list in line with the vertical line */
    width: calc(100% - 5rem)
    /* Aligns the text of exhibitions to the right edge */
    text-align: right

  &__event
    padding: 1rem 0
    padding-right: 2rem
    /* set the reference point for the timeline bullet points */
    position: relative

    …

    &__heading
      font-size: 1.5rem
      line-height: 1.2
      margin-bottom: 0.5rem
      color: $linkColor

The timeline bullet points

Each event on the timeline is highlighted by a bullet point. These are made by the CSS ::after pseudo-element thus they don't require any additional HTML markup. As an icing on the cake, I've added a gentle micro-animation. I'm animating the bullet point's box-shadow property and offsetting the odd and even bullet points by half of the animation period, thus creating an alternating effect.

  &__event
    …

    &::after
      content: ''
      width: 1rem
      height: 1rem
      background-color: $linkColor
      position: absolute
      top: 1.5rem
      right: calc(-0.5rem - 1px)
      transform: rotate(45deg)
      animation-duration: 1.5s
      animation-name: microEvent
      animation-iteration-count: infinite
      animation-delay: 0

    &:nth-child(odd)
      &::after
        animation-delay: 0.75s

    @keyframes microEvent
      from
        box-shadow: 0 0 0 rgba($linkColor, 0.5)

      to
        box-shadow: 0 0 1rem 0.5rem rgba($linkColor, 0.1)

Special thanks go to my wife for letting me use some of her artist's CV records to make the example a bit more natural and for the cover image. Please, reward her goodwill, visit her website Emma Plunkett Art and perhaps even buy a piece of her artwork.

My story as a web developer – mid-senior level

Honza — Wed, 06 May 2020 16:46:32 +0000

I'd like to thank every one of you who gave me feedback on the first part of my dev's journey. One of the questions that came up, is why am I writing all this? The answer is, that I'd like to encourage web developers, that are at the beginning of their journey, to dive in and fully submerge in this beautiful world of infinite possibilities. My articles on the topic aim to provide you with a couple of points of reference that I, myself, found useful and entertaining.

Web dev's puberty - my first co-working efforts

After some time of playing with code on my own, I started to gain confidence in my skills. I started co-working with other people. It wasn't easy to find that many people that shared my passion for web development in the rural area where I lived. Usually, people didn't have a clue what I was talking about. Eventually, I got introduced to Ippy from Netuxo Coop, who runs her small web development agency. She uses her contacts on the British and international activist scene to enable highly ethical NGOs to have a web presence and to pursue their online goals.

Drupal's learning curve has even its own meme. What a legend!

Netuxo focuses mainly on Drupal-based websites. This was a novelty for me. Drupal's learning curve is legendary. However, I enjoyed working with Ippy and Andrea(s). Even though I maintained my freelance status, I was working more and more exclusively for Netuxo. I was helping them with regular Drupal updates, designing websites and user interfaces, and then turning these into static HTML/CSS/JS prototypes and subsequently developing full-featured Drupal 8 themes.

It was then when I learnt about tooling. At first I was using my CSS pre-processor skills such as SCSS/Sass,Compass (does anybody still use it?) and Less. It quickly became obvious, I needed some reliable way of compiling the source code that was more sustainable than running their command line default compilers. Some sort of tool that would enable me to write modern code, whilst making it readable for older browsers.

An example of a Webpack config file, enabling me to merge different partial configurations into one.

I started off with a small desktop app called Prepros – it's basically an app wrapper for Webpack and it does the job and does it well. The problem was, that I was the only one who could compile the code. Not an ideal situation in a collaborative context. The next obvious step was to learn Webpack. There is actually a couple of really good free courses at the Webpack Academy, these got me started. Eventually, I settled on using Laravel's Mix for compiling front-end resources.

This opened up my possibilities because I could now use Javascript ES6. To start with I wasn't sure what I was doing and started mixing ES6 over ES5 without even realising I was doing that. Yet, it worked – thank you Babel! My ignorance was truly blissful. Around this time, I came across Wes Bos aka @wesbos and a couple of his courses. At first, I bumped into Javascript30. A great exercise course showing the new ES6 features on practical examples. At the same time, the ES6.io Master Package happened to be on sale. Coincidence? I don't think so! I jumped at the opportunity. This was a game-changer for me. Javascript suddenly felt so much easier. Wes is a brilliant teacher, he puts a lot of time into his courses and it shows. He can deliver the concept, not just the syntax and his examples and exercises are well-thought through. There are no confusing foos and bars, but real-life situations using multimedia and user interaction. In short, Wes' courses are fun.

JavaScript Tooling - 004

Syntax - Tasty Web Development Treats

Your browser does not support the audio element.
1x initializing... ×

Wes teams up with Scott Tolinski aka @stolinski and between them, they produce a podcast called Syntax.fm. It's a great resource of knowledge about dev's technologies, technique's and also bbq tips. They are really entertaining – I highly recommend listening to them.

Whilst working with Netuxo I got to use the command-line interface (CLI) much more, as a lot of work was done remotely on their development servers. It also started to make sense to use some sort of Git branch-based workflow. Being a small team, we sometimes got away with forgetting to be meticulous about implementing it.

There were periods of downtime with Netuxo, which usually coincided with the summer season as the rest of the team went away for their holidays. These periods would last for about two to three months. I had time for self-study. Working on my own projects was becoming more and more scarce, because I didn't chase any new leads, so I found myself more often participating in other people's projects during this time.

Knowledge Island – my mid-level graduation

There is one project I worked on during one of these (quieter) periods that I think is worth writing home about. I was recommended by Ippy to her ex-coworker, Joris. He was looking for someone to help him develop a new feature, for a web-based application, that helps young kids in the USA to fight the problem of childhood obesity. Joris was just too busy with other features, that he was happy to outsource this one to me.

The brief was to develop an online web application that would enable children to create personalised workout routines. They got to choose from a selection of 10 videos, each with different exercises. They can set the length for each exercise from three or four options and choose how many repetitions for each video. This would then generate a single video stream made up from a generic intro video, followed by the selected exercise videos (with the right amount of repetitions) and finished off with an encouraging outro video. All this would be saved using Ajax into the Joomla based main apps database.

I had literally zero Joomla experience. After struggling with Drupal for what was by then about a year and a half, I made it clear with Joris, "I'm happy to do the frontend part and even create the API interface but you will have to tie it all into Joomla yourself." He agreed… phew!

I was a bit unsure about one particular aspect – Joris and his client Tony insisted on hosting the videos themselves. Prior to this gig, I had no experience of using the browser's video API. I always opted for some sort of 3rd party video player, whether it was Youtube, Vimeo or JW Video Player (when it was still in its infancy). I still said yes to the gig, thinking I'll just have to wing it. We compromised on using the Video.js library to make it easier to deal with the stream part of the task.

And I winged it! I designed a responsive web app giving the users (kids) an intuitive interface based on drag&drop functionality. The result is smooth playing in-app generated video playlists that are optimised not only for various screen sizes but also for different bandwidths, as the kids often use mobile devices more than computers.

I can't really use that for my portfolio as it's behind a paywall and relies on copyrighted material for the video stream, but this was a significant project for me. It gave me the confidence that (with just an occasional consultation with the technical lead) I can tackle on my own and deliver on time, a project of this size and complexity. I've learnt that:

You shall face your fear of handling complex projects. Take them on, even if you don't know all the answers when starting. Analyze them, break them into smaller manageable chunks and deal with each chunk separately.

Moving on up…

In 2019, there was another significant length of downtime for me, in terms of my work with Netuxo. In the early summer, we finished an important project – an upgrade of a website providing access to NGOs and their lawyers to all British immigration-related court cases. More than 60,000 pages, some with many various taxonomies. I was responsible for the development of a large part of the Drupal 8 theme.

Once we launched, we all went for holidays in different parts of the world, thinking there will be more work from early autumn. As the summer was ending, there was bad news about projects being delayed, put on hold or some even cancelled. Our family finances were not ready for this kind of delay. I had not been chasing any of my own work leads for about two years by this time, so my funnel was pretty empty. I didn't actually want to do yet another artist's portfolio website anyway. There is no challenge for me doing that type of work, apart from explaining to the artist that their budget does not really allow for changing the way people navigate the internet and that they should instead focus on displaying their art and developing an online marketing strategy.

This is when I updated all my professional online accounts, wrote down my CV and sent it out to local contacts and then eventually to the world. It was time to up my game and work on a bigger project. I had been yearning to find my geek tribe - to be part of a bigger team, where the roles are more defined. But that is another story, one that I'm planning to publish soon.

Header image: Andalusian landscape – Bridge, Emma Plunkett Art © 2019

DEV Community: Honza

Creating HelloWorld CLI Command with NodeJS

The Brief

Pre-requisites

The Solution

TLDR;

Create a Node package

Basic file structure

The CLI command hello

run() – process the command

showGreeting(names) - display the right greeting

That's it, folks!

`allUnique()` characters – Interview Question

Task description

TL;DR

Tests

Solution 1 – the Array.prototype.reduce()

Solution 2 – the while() loop

Solution 3 – the String.prototype[@@iterator]()

And the winner is…

Results

My favourite learning resources for web developers

Courses

Books

Talks, presentations and podcasts

A NodeJS application calling a 3rd-party API

TL;DR

What I wanted to achieve

Prerequisites

What have I learned

Step 1: Axios – fetch the data from the remote API

Step 2 – The application serving UI to the visitor and processing their requests

ExpressJS

The application setup

Handling the Handlebars templates

App's routing

Shortly about the frontend (read browser) Javascript

Gutenberg cheatsheet – Block's `supports` property

Gutenberg – Block Deprecation

How does the deprecation actually work

Structure of the deprecated version of a block

attributes object

supports object

save( props ) function

migrate( attributes, innerBlocks ) function (optional)

isEligible( attributes, innerBlocks ) function (optional)

Create A File Structure For React Components Using Xargs Command

How do you use the `` component in Gutenberg development?

My story as a web developer – How I landed my job

I need to find some work

Curriculum Vitae

Job interviews

Accepting the right offer

Jamstack Virtual Conference 2020

What is your favourite talk so far?

Curriculum Timeline – Stylus (CSS) Tutorial

The Curriculum Timeline – grab the code

Default settings and variables

The basic structure

The structure of the individual year elements and their labels

The actual list of exhibitions

The timeline bullet points

My story as a web developer – mid-senior level

Web dev's puberty - my first co-working efforts

JavaScript Tooling - 004

Syntax - Tasty Web Development Treats

Knowledge Island – my mid-level graduation

Moving on up…

The CLI command `hello`

`run()` – process the command

`showGreeting(names)` - display the right greeting

Solution 1 – the `Array.prototype.reduce()`

Solution 2 – the `while()` loop

Solution 3 – the `String.prototype[@@iterator]()`

`attributes` object

`supports` object

`save( props )` function

`migrate( attributes, innerBlocks )` function (optional)

`isEligible( attributes, innerBlocks )` function (optional)