Forem: Sergii Kirianov

Building Reactive CLIs with Ink - React CLI library

Sergii Kirianov — Fri, 03 Nov 2023 15:35:45 +0000

As I said in the previous article about building CLIs:

I'm in love with CLIs.

But, I'm also in love with React, somehow it just clicks with me and even though it has received a lot of hate lately (if you haven't noticed it - you're not on Twitter X) I still love it 🤷‍♂️

But did you know that you can build CLI apps with React?!

In this article, let's learn how to build reactive CLIs with React Ink library 🫰

Getting Started

Before we start though, let's take a look at the result CLI app that we will build together 👀

Looks cool, right? Building a similar UI in the terminal without any library would be quite hard, though, thanks to Ink it's almost as easy as building any frontend UI with React.

Starting a project

First, we will need to create a new project, for this, we will use the Ink command to generate a new project.



npx create-ink-app --typescript my-ink-cli

I'm going to use TypeScript, but it's not necessary and you can simply follow this guide omitting types.

Let's open the project in the IDE and investigate the project structure.

The project structure looks familiar if you have experience with React applications, the only significant difference is the cli.tsx file. Let's take a look at both the cli.tsx and app.tsx files closely:



//app.tsx

import React from 'react';
import {Text} from 'ink';

type Props = {
    name: string | undefined;
};

export default function App({name = 'Stranger'}: Props) {
    return (
        <Text>
            Hello, <Text color="green">{name}</Text>
        </Text>
    );
}

If you ever worked with React Native, this will look very similar to what you do in there. Instead of HTML elements, we are using built-in components that use Terminal APIs under the hood to render them. Ink provides a set of Components to use in your application. On top of the components, you can also observe that they receive props - color in this example. Every component has a bunch of available props that mimic known CSS variables, you can find more about style props in the Ink's documentation.

app.tsx simply exports App component, that receives name prop.



// cli.tsx

import React from 'react';
import {render} from 'ink';
import meow from 'meow';
import App from './app.js';

const cli = meow(
    `
    Usage
      $ my-ink-cli

    Options
        --name  Your name

    Examples
      $ my-ink-cli --name=Jane
      Hello, Jane
`,
    {
        importMeta: import.meta,
        flags: {
            name: {
                type: 'string',
            },
        },
    },
);

render(<App name={cli.flags.name} />);

As you can see, cli.tsx also looks pretty similar to React's root file, but, it has something more to offer using meow library. meow is a popular library that helps you build nice CLI applications gives you access to create usage docs and handles args and flags.

At the end of the file, you can find render method, similar to what Web React does - renders top App.tsx file.

First CLI application with Ink

Let's get to the fun part and create our first tiny CLI app. First, we will remove unnecessary flags, props and replace everything inside App component with a simple "Hello, World!" text.



//cli.tsx
import React from 'react';
import {render} from 'ink';
import App from './app.js';

render(<App />);



//app.tsx
import React from 'react';
import {Text} from 'ink';

export default function App() {
    return (
        <Text>Hello, World!</Text>
    );
}

This will simply print the text in the console.

Let's try it out! Remember, after every change in the CLI source code - you need to run npm run build to create an executable file.

After you build an application, you need to run it. To do that, you can run cli.js file inside dist folder like this:

If everything was done right, you would get "Hello, World!" printed in the terminal - nothing much for now, but the first step towards our goal!

Building CLI File Explorer

To build File Explorer we would need to do a few things:

Show the current Path
Get the list of folders/files in the current directory
Store them
Render the list
Navigate the list Up and Down
Go In and Out of directories using Enter and Delete keys (Backspace for Windows)
Update the changes to the UI to display the current path, selection, and current folders/files in a new directory

Sounds complicated, but bear with me, it will be easier than you think 😉

Let's start with the simplest - show the current path and get a list of folders/files.

Current Path and List of Folders/Files

To simplify the process of running the commands, I will use execa - abstraction library on top of Node.js child_process methods.

Install it:



npm i execa

execa will help us to run commands like ls and pwd inside the CLI application.

First, let's create variables to store our path and folders/files. But...how should we do it? let? var? Nope 😌

Remember, Ink is built on top of React, which means - we can use React hooks! Inside your App component, add two variables using React's useState hook:



const [path, setPath] = useState('');
const [files, setFiles] = useState<string[]>([]);

//if you don't use TypeScript, you can ommit <string[]>

Now, as in traditional React applications, whenever the set* function is called and the value of path/files are changed, React will re-render respective components.

Right now these values are empty, so, let's use another famous hook to populate them on App component mount.



useEffect(() => {
    execa('ls', ['-p']).then((result) => {
        setFiles([...result.stdout.split('\n')]);
    });
    execa('pwd').then((result) => {
        setPath(result.stdout);
    });
}, [])

So, what's going on here?

When useEffect hook is called with an empty dependencies array, which means it will run only once on component mount. When this happens, two things are executed:

execa runs ls command to list all folders/files in the current directory and -p flag means that ls command will append / slash to the end of the folder names, which will help us later on to differentiate between folders and files

* Once `execa` completes the command, we get access to `result` object. Since the resulted `stdout` is a text with every new folder/file representing a new line, we need to split them by `/n` and then we assign the resulting array to `files` variable.

execa runs pwd command to get the current path

* Once `execa` completes the command, we get access to `result` object and set our `path` variable to `result.stdout` using `setPath` function.

Now, this is how our app.tsx file looks:



import React, { useEffect, useState } from 'react';
import { Text } from 'ink';
import { execa } from 'execa';

export default function App() {
    const [path, setPath] = useState('');
    const [files, setFiles] = useState<string[]>([]);

    useEffect(() => {
        execa('ls', ['-p']).then((result) => {
            setFiles([...result.stdout.split('\n')]);
        });
        execa('pwd').then((result) => {
            setPath(result.stdout);
        });
    }, [])

    return (
        <Text>Hello, World!</Text>
    );
}

We have all the data we need for now: current path and list of folders/files. Next, let's build a UI!

Path and Files UI

Since this is just a guide, we will not go over our heads to create something stunning, but we will cover the main features of Ink.

Let's start by creating a div...I mean, Box and display the data that we've got:



<Box>
    <Text color="yellow">Path: <Text color="cyan">{path}</Text></Text>
    <Box>
        {files.map((file, index) => <Text key={index}>{file}</Text>)}
    </Box>
</Box>

As you can see, we used Box and Text component, that represents components similar to div and span respectively. We have used color prop, to give them distinctive colors.

Inside the top Text component we display path value and inside the Box we iterate over files array and render Text component with it's contents.

Let's run the application and see the result (don't forget to build it before).

If you didn't get any errors during the build, you will see something similar.

LOOKS UGLY!

But, it does what we wanted - congrats! Now, let's yassify it 💅



<Box flexDirection='column'>
    <Text color="yellow">Path: <Text color="cyan">{path}</Text></Text>
    <Box flexDirection='column' flexWrap='wrap' height={8}>
        {files.map((file, index) => (
            <Text paddingLeft={1} color='grey'>{file}</Text>
        ))}
    </Box>
</Box>

Build the CLI application again and run it:

"Feel the difference 💅"

The output looks way-way better! In the code above we have used CSS props that might have reminded you about inline CSS in JS. This is great, since if you know them, you will be super comfortable working with Ink!

We have "fetched" and rendered the current path and folders/files - next, we need to add some interactivity and reactivity to our CLI.

User Input Handling

Ink provides us with a lot of tools to build incredible and interactive CLIs. One of these is useInput hook. useInput hook allows us to watch for user input and based on the key they pressed react in any way we want.

So, if you remember, one of the goals of our File Explorer application is to be able to navigate the files and go Up and Down the folders. Let's do just that.

Navigating files in the current directory

Let's think about how we can allow users to navigate between the files. Since files variable is an array, which means that we can navigate this array left and right if only we know the index, or better say - pointer.

The animation above describes perfectly the approach we need to follow. We will create a variable pointer that will be responsible for what the user is currently looking in the array. When the user hits down key, we will increment the pointer by 1 - meaning, the user now looks at files[1] file. And if the user hits up key, we will decrement the pointer by 1 - meaning, the user now looks at files[0] file. Sounds like a plan 😌

Let's implement it in the code using useInput hook from the Ink library.



//app.tsx
//...

useInput((_, key) => {
    if (key.upArrow) {
        setPointer((prev) => (prev <= 0 ? 0 : prev - 1));
    }

    if (key.downArrow) {
        setPointer((prev) => (prev >= files.length - 1 ? files.length - 1 : prev + 1));
    }
});

//...

In the code above, we are using built-in useInput hook that gives us access to key argument that represents the key user clicked. I added some edge case handling, so that the pointer can't become less than 0 and more than the last index in the files array.

I could tell you to run the app and try it out, but you won't see anything.

Let's handle one last thing. We need to reflect the user's selection in the UI, otherwise pointer will do the work, but the user won't be aware of what file they are looking at.



{files.map((file, index) => {
    const selected = index === pointer;

    return (
        <Box key={index} flexDirection='row' paddingLeft={1} justifyContent='flex-start'>
            <Text color='greenBright'>{selected ? '> ' : '  '}</Text>
            <Text color={selected ? 'greenBright' : 'grey'}>{file}</Text>
        </Box>
    )
})}

In the code above we modified the rendering of files array and added a few things:

selected - if pointer is equal to index of the current file return true
top Text component - responsible for showing > sign pointing at folder/file
bottom Text component - modified to get color greenBright if selected true

Now, we are ready! Let's build and test the application:

To stop the CLI application, when the terminal is in focus hit Ctrl+C

This. Looks. GREAT!

We've done an amazing job! Let's do one last thing and we are good.

In/Out Folders Handling

We have handled most of the use cases for this application, except for one - how to navigate in and out of the folders. Let's not waste much time on it, since it includes all the things we have already covered above.

Inside your useInput hook add the following below up/down keys handling:



if (key.return) {
    if (!files[pointer]?.includes('/')) return;

    let newPath = `${path}/${files[pointer]}`.slice(0, -1);
    execa('ls', ['-p', newPath]).then((result) => {
        setFiles([...result.stdout.split('\n')]);
    });
    setPath(newPath);
    setPointer(0);
}

if (key.delete || key.backspace) {
    let newPath = path.split('/').slice(0, -1).join('/');
    if (newPath[newPath.length - 1] === '/') {
        newPath = newPath.slice(0, -1);
    }

    execa('ls', ['-p', newPath]).then((result) => {
        setFiles([...result.stdout.split('\n')]);
    });
    setPath(newPath);
    setPointer(0);
}

Let's break the code above into steps:

If key === return
- if the user tries to enter inside "non-directory"(file) - return
- create a new path string using the current files[pointer] folder name and remove / from the end of the string
- use execa to run ls command inside newPath directory
- when execa is done, set new files to the resulting stdout
- set a new path using setPath
- set pointer to 0
if key === delete or backspace (to support Windows)
- create a new path by removing the last part of the path
- if the new path ends with / - remove it
- use execa to run ls command inside newPath directory
- when execa is done, set new files to the resulting stdout
- set a new path using setPath
- set pointer to 0

Time to try it out!

Awesome! Works well and looks great!

Bonus: User Hints

Last, but not least, let's add some user hints, so they know how to use this application. Add the code below after the Box rendering files array:



//app.tsx
//...
<Box flexDirection='column'>
    <Text color='grey'>
        Press <Text color='greenBright'>Enter</Text> to enter a directory, <Text color='greenBright'>Delete</Text> to go up a directory
    </Text>
    <Text color='grey'>
        Use <Text color='yellow'>Up</Text> and <Text color='yellow'>Down</Text> to navigate
    </Text>
</Box>
//...

For the last time today - build and run the app!

Conclusions

In this article, we used Ink - React-based library for building reactive and interactive UI CLI applications, to build our own CLI File Explorer app!

Ink is one of the greatest examples of how powerful React is, even outside of the Web. React ideology and built-in hooks and APIs are powerful enough even for CLIs and way more than that.

Our application is not complete though. The user wants not only to explore the folders and files but also cd into folders and quit the CLI app without doing it themselves, but, I will leave it for you 😏 Let me know in the comments if you were able to finish it!

Thanks for reading and I hope you enjoyed it! Hit me up on Twitter if you have any questions and give a star to Ink!

Learn Next.js Server Side Rendering by building your own implementation

Sergii Kirianov — Wed, 11 Oct 2023 19:10:09 +0000

If you're here, most probably you have issues understanding how Server Side Rendering (SSR) works in meta frameworks like Next.js. I had them too and this is why I decided that I want to learn how they work under the hood and the best thing to do it - build it yourself.

Of course you could also read Next.js source code, but it's really hard to understand it if you never had experience with projects so big and complex.

So, where are we at?

Understand Server Side Rendering

First, to get a good understanding of what we are about to do, let's talk about what Server Side Rendering is.

Server Side Rendering is a process where a web server generates an HTML page on the server itself, rather than letting JavaScript handle that on the client (browser).

When a user visits a web page, the server will:

Get the data from the database if required
Inject this data into the HTML template
Respond with the resulting HTML back to the client

In the end, the browser would receive a generated HTML page and then request all the necessary static assets like CSS, JavaScript, etc.

This is a very well-known process that was around for ages, but not in the React world. Next.js (along with other meta-frameworks) has popularised a new approach, where you basically write the same React as usual with a few new ways of fetching data and underlying technology will take care of rendering React on the server and delivering a complete HTML page to the client, instead of originally bare minimum HTML and a lot of JavaScript.

Next.js does way more than just that, but we only care about SSR here 😌

Those who are new in the Next.js world may wonder, how the heck React - a frontend JavaScript framework can be rendered on the server but still has all the features like useState, useEffect, etc on the client?

So, let's recreate Next.js Server Side Rendering functionality from scratch and go step by step to understand "what the heck is going on" and "how the heck getServerSideProps function is even called"?

Welcome to "Learn Next.js Server Side Rendering by building your own" 😁

Project Setup

In order to create SSR functionality, first we need to create that very first 'S' - server. Since I don't know anything else than JavaScript (TypeScript doesn't count, okay?) and also Next.js uses Node.js under the hood, AND ALSO we still need to work with React since it uses JavaScript - let's start with that.

Creating Node.js Server

For this tutorial, I want to create a bare-bone Node.js application and start building it along with you, so we don't miss anything 😁

Ready?

Start New Project

Create a new folder react-ssr, cd into it and generate a new npm project by running:



npm init

Good news - this part is done 🤣

Create a Basic Express.js Application

Since we are not replicating the Next.js server, but doing a simplified version of it, I will use the Express.js library to create the server and handle requests.

I will use yarn package manager, but you're free to use anything you prefer

Install express and create a basic Express.js application



yarn add express

In the root of your project create a new file server.js and paste the following code:



import express from 'express';

const app = express();
const port = 3000;

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

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

Let's test it out. Start the server from the terminal node server.js

Congratulations! Our first error 😁

Node.js cannot use import by default, so in order to fix that, we will need to add a transpile step in our workflow.

Trust me, this will help us in the future, so bear with me even if right now it looks like unnecessary comlpexity

To transpile our code, we will use Babel - a JavaScript compiler, that will generate files Node.js is happy with, and Webpack - a JavaScript bundler, that will bundle our code and automate the compilation step.

Configure Babel

First, install all the necessary dependencies by running the following code:



yarn add -D @babel/core @babel/cli @babel/preset-env

This will add packages as devDependencies.

Now, at the root of your project create .babelrc file and paste the following configuration inside:



{
  "presets": [
    "@babel/preset-env"
  ]
}

Let's test it! Run the following command inside your project:



npx babel server.js --out-file test-server.js

Babel will transpile our server.js file and create a new test-server.js file.

Start the project



node test-server.js

If everything went well, congrats your server is started ✨

Configure Webpack

Okay, okay, this all may be a bit hard, but this is the last configuration step, I promise!

Install Webpack dependencies and babel-loader package



yarn add -D webpack webpack-cli webpack-node-externals babel-loader

Again, adding packages to your devDependencies.

In the root of your project create a new file webpack.config.js and paste the following code inside:



const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = [
  // Server-side configuration
  {
    entry: './server.js',
    target: 'node', // Compiles for node.js environment
    externals: [nodeExternals()], // Excludes node_modules from the server bundle
    output: {
      filename: 'server.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/static/'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: 'babel-loader'
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    mode: 'development'
  }
];

Here we are simply telling Webpack to get entry file for server from the root folder and after everything is bundled store the final file inside dist folder.

Just try to read it top to bottom line by line and you'll see it 😉

And let's create a new script inside package.json file to run our app from a single command. Replace "scripts" object with the following code.



// you can remove "test" script from the file

"scripts": {
  "build": "webpack --watch",
  "start": "nodemon dist/server.js"
},

What does it do?

"build" - telling Webpack to bundle the code as per config and watch if entry files change, if yes - rebuild

"start" - nodemon watches server.js file inside dist folder and if it changes, restarts the server

P.S. if you don't have nodemon installed globally, add it as a dependency to the project - yarn add -D nodemon

So, shall we?

Run yarn build (or npm run build if you chose npm) - Webpack will generate the final bundled files.

Run yarn start - your server should be up and running!

Phew! That was a bit intense, but trust me, we would end up doing it anyway once we get to the React part.

BACK TO THE FUN PART

First React Component

If you still remember what we are here for - good job. If not, I will remind you. We want to render React page on the server and for that, guess what, we need React component! Let's start with something very simple.

Inside the root of your project create a new folder app and subfolder pages - this is where we will keep our React page (we are mimicking Next.js after all)

Let's install React and React-DOM



yarn add react react-dom

And also Babel React preset as devDependency



yarn add -D @babel/preset-react

Now our project is ready to use React. Inside app/pages/index.jsx create a very basic React component:



import React from 'react';

export const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
}

Good, but, how do we render it? 🤔

Rendering React Component on The Server

Luckily there's already a function for us available from the react-dom package - renderToString - you can read more about it here Server React DOM APIs.

As per React docs renderToString renders a React tree to an HTML string - exactly what we need in order to get HTML out of React component!

Let's change our Express app to use the function in order to render HomePage to string that we later can pass inside the HTML page.

Modifying Express App

My idea is that when a user visits the / route, HomePage the component will be rendered. For that, let's change the / route handler.

Inside the server.js file:



app.get('/', (req, res) => {
  const htmlContent = renderToString(<HomePage />);
  res.send(`
    <!DOCTYPE html >
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>React SSR</title>
      </head>
      <body>
        <div id="root">${htmlContent}</div>
      </body>
    </html>
`);
});

Don't forget to import renderToString function and HomePage component.



import { renderToString } from 'react-dom/server';
import { HomePage } from './app/pages';

So, let's see what it does step by step:

app.get('/', () => {}) - listens to index route (/) and calls the function when a GET request is received.
const htmlContent = renderToString(<HomePage />); - using the react-dom/server function takes React component as an argument and renders it to an HTML string.
res.send(`...`); - injects htmlContent inside template HTML string and sends as a response to the client

Check the diagram below to see the overview of this process.

I bet you are eager to try it out!

Well, let's try it 😉

Right...Webpack doesn't know about React. Let's fix it 🙌

Add the following to your .babelrc file:



{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react" // <---- ADD THIS
  ]
}

TRY AGAIN!

Alright, the build is successful! Now, let's start it and visit localhost!



yarn start

Open your browser and navigate to http://localhost:3000

Okay, okay, I won't torture you anymore. Basically, what is happening is that our server.js file cannot use React unless we import it and rename the file to .jsx too, so we can use JSX inside of it.

Let's fix that!

Fixing Express / React incompatibility

First, import React to your server.js file



import express from 'express';
import React from 'react'; // <-- ADD THIS
import { renderToString } from 'react-dom/server';
import { HomePage } from './app/pages';

Next, rename server.js to server.jsx
And modify the Webpack config



    entry: './server.jsx', // <--- CHANGE .js to .jsx
    target: 'node', 
    externals: [nodeExternals()],
    output: {
      filename: 'server.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/static/'
    },

Good, let's try it again.



yarn build && yarn start

Go to localhost:3000

YASSSSSS!

Awesome! Now, we have legit Server Side Rendered React code! Congratulations!

Let's Make It Real React

We have managed to render React on the server side and ship it to the client. But...is it even React? 🥲

Since we are on our way to mimicking Next.js, let's mimic more of it! Something like getServerSideProps maybe? 👀

notNextServerSideProps

Let's create a function that will be exported from our page and used to fetch data on Server Side too. Go to app/pages/index.jsx and add the following code outside of the HomePage component:



export const notNextServerSideProps = async (fetch) => {
  const data = await fetch('https://fakestoreapi.com/products')
    .then(res => res.json())
    .then(json => json);


  return {
    props: {
      title: 'All Products',
      products: data
    }
  }
}

Inside the notNextServerSideProps function we are making a call to Fake Store API - an open and free e-commerce store API. Here, we are simply getting a list of products.

Once we get the data, we return it as props object, adding custom title.

In order to be able to use fetch in Node.js application, we will install node-fetch package ("node-fetch": "^2.6.7") and pass it as an argument.

This is a workaround(!), but for a simple prototype will do.

Calling notNextServerSideProps on The Server

First, install node-fetch the package. We will go with the version 2.6.7 since it is commonjs package and it will save us some time.



yarn add -D node-fetch@2.6.7

Let's modify the / route handler and call notNextServerSideProps in order to fetch the data on the server.



app.get('/', async (req, res) => {
  const initialData = await notNextServerSideProps(fetch);

  const htmlContent = renderToString(<HomePage {...initialData.props} />);
  res.send(`
    <!DOCTYPE html >
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>React SSR</title>
      </head>
      <body>
        <div id="root">${htmlContent}</div>
      </body>
    </html>
`);
});

First, we made app.get callback an async function, so we can await a response from the Fake Store API
initialData - data returned from notNextServerSideProps function
<HomePage {...initialData.props} /> - pass the initialData.props as props to HomePage component.

Don't forget to update your imports! (I forgot while writing this article)



import { HomePage, notNextServerSideProps } from './app/pages'; // <--
const fetch = require('node-fetch'); //<-- using node-fetch library

Rendering React Component with Props

Now, we will need to change the HomePage component, so it can actually receive and use props inside.



export const HomePage = ({ title }) => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

For now, we will keep it simple and render title only. Save files, build (yarn build) project and start it again, then visit localhost:3000.

Good! The notNextServerSideProps function is running and passing props down to the React component, which then renders with the dynamic data.

Let's utilize the data we receive from Fake Store API then!



export const HomePage = ({ title, products }) => {
  return (
    <div>
      <h1>{title}</h1>

      {products.map(product => (
        <div
          key={product.id}
          style={{
            display: 'flex',
            flexDirection: 'column',
            width: '200px',
            border: '1px solid black'
          }}>
          <p>{product.title}</p>
          <p>${product.price}</p>
          <p>{product.description}</p>
        </div>
      ))}
    </div>
  );

Here, we destructure products from props and map over them in order to display product data. We also add some inline style just to help us visualize it better (it will be ugly - bear with me).

Once again, build -> start -> localhost:3000.

GOOOOOOOOOOOOOOD!

We have implemented a very hacky and very simplified version of Next.js getServerSideProps ourselves! How cool is that, huh?!

I Said Real React

React is not only about mapping over an array of data and rendering it. React is all about 'reactivity' (pun intended). And this is what our app is lacking at the moment.

But, how can we add reactivity to the page if we don't have any JavaScript inside the HTML page and especially nothing close to React itself - this is where Hydration comes into play.

What is Hydration?

As per ChatGPT

Hydration: To make this static content interactive, React needs to attach event listeners and establish its internal representation of the page. This process is called "hydration." During hydration, React will preserve the server-rendered markup and attach event handlers to it, effectively turning the static content into a dynamic React application.

What it means is that React will take over the rendering inside the browser, use the HTML and data provided by the server and make things clickable, interactive, and reactive.

Luckily for us (again) React team has another function for us called hydrateRoot. You can read more about it here - React Client APIs.

It's very easy to use this function. We need to create an entry point into our Client application, get the root element of our app and using hydrateRoot - hydrate components into the root element (sorry for the tautology).

Create Client Application

To create an entry point to our application, inside app folder, let's create app.jsx file and write some code inside:



import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { HomePage } from './pages';

const domNode = document.getElementById('root');
hydrateRoot(domNode, <HomePage />);

As we learned before, we get root element from the DOM and hydrate component inside it using hydrateRoot function.

But this will lead to an error, many errors to be honest, but let's start one by one.

It's extremely important that SSR React output (HTML) and CSR React output (HTML) are matching, otherwise React will not be able to render and attach event listeners properly.

In order to make sure that the data available to HomePage the component is exactly the same, Next.js injects this data as a global variable inside window the object as part of the HTML it returns to the client.

Let's do it together but before that!

Extract HTML Template in The Separate Function

So far we were injecting htmlContent directly in the string inside the / route handler. This is of course not optimal, since the more routes we get, the more HTML templates we will have hardcoded in our project.

To avoid that and make the template more versatile, let's create document.js file and document function inside it.

By the way, this will be simplified version of Next.js _document.js file

Create utils/document.js file in the root of your project and paste the following code:



export const document = (htmlContent) => {
  return `
    <!DOCTYPE html >
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>React SSR</title>
      </head>
      <body>
        <div id="root">${htmlContent}</div>
      </body>
    </html>
    `;
}

Now, go back to server.jsx and change the route handler:



//...
import { document } from './utils/document';
//...

app.get('/', async (req, res) => {
  const initialData = await notNextServerSideProps(fetch);

  const htmlContent = renderToString(<HomePage {...initialData.props} />);
  const html = document(htmlContent);
  res.send(html);
});

We can reuse this function for future pages!

Pass Initial Data to HTML

Let's add initialData that we receive from the notNextServerSideProps function and inject it into HTML. For this, we need to pass it on to the document function and then add it as a <script> tag inside HTML template.

Open document.js file and replace the existing code with the new one:



export const document = (htmlContent, initialData) => {
  return `
    <!DOCTYPE html >
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>React SSR</title>
      </head>
      <body>
        <div id="root">${htmlContent}</div>
        <script>window.__SSR_DATA__ = ${JSON.stringify(initialData)}</script>
      </body>
    </html>
    `;
}

initialData - added initialData as an argument to the function
<script> - inside this script tag, we set a new property to window object - __SSR_DATA__ that will be available globally inside the app. initialData has to be stringified in order to be transferred across the network.

Now, when the Client Application is loaded in the root of our HTML, it can access the initialData and use it in order to hydrate the component!

And add initialData.props to the document function inside route handler:



app.get('/', async (req, res) => {
  const initialData = await notNextServerSideProps(fetch);

  const htmlContent = renderToString(<HomePage {...initialData.props} />);
  const html = document(htmlContent, initialData.props);
  res.send(html);
});

Adding `initialData` to HomePage Component

Since the data is available in the window object, we can easily access it from the Client Application.

Open app.jsx and add the following:



/* imports */

const initialProps = window.__SSR_DATA__;

const domNode = document.getElementById('root');
hydrateRoot(domNode, <HomePage {...initialProps} />);

getting initialProps from the window object
passing initialProps as HomePage props

Now, when React will hydrate the component on the Client Side, it will have access to the same exact data as the Server and the contents will match.

Running Client Application

Our latest challenge is to run a Client Application because so far, we are only rendering HTML on the server and sending it to the browser, but we don't really run React app in the browser.

Remember I said "no more Webpack"? I LIED.

First of all, we need to transpile our React code into browser-readable code using Babel and Webpack, so all imports are bundled together.

Inside your webpack.config.js paste the following before or after the server-side config:



{
    entry: './app/app.jsx', // Entry point for your client-side code
    output: {
      filename: 'app.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/static/' // Important for dynamic imports to know where to fetch bundles
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: 'babel-loader'
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    mode: 'development'
},

Again, no magic here, just simple "where grab the file" and "where to put this file".

Once this is done, Webpack will transpile and bundle app.jsx to app.js and keep it in the dist folder.

Now, we need to actually make our HTML request for the Client Application aka app.js. Express.js provides us with a simple middleware to set up a static folder, from where HTML can request files. Let's do that.



app.use('/static', express.static(path.join(__dirname)));
// THIS CODE SHOULD BE BEFORE app.get

// app.get('/', async (req, res) => {

Since the output file (after transpile and bundling) will be located inside dist folder (dist/server.js), we set static middleware to point to the same directory.

don't forget to import path 😉 (yes I forgot again)

Now, when HTML requests for static content (JS, CSS, images) it will be able to call /static route and get what it needs.

The very last step is to add app.js to the HTML. Open your document.js and add the following after the initialData script tag.



<script src="/static/app.js"></script>

Everything is ready! Let's try it out!

build -> start -> localhost:3000

Everything looks the same as before...But, there are no errors and it means that everything worked! Test time!

Testing SSR React Application

Let's make a simple test!

We will create a counter on top of the page and for every product card add a button that onClick will console log product name.

Go back to app/pages/index.jsx and replace HomePage component:



export const HomePage = ({ title, products }) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>

      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
        {products.map(product => (
          <div
            key={product.id}
            style={{
              display: 'flex',
              flexDirection: 'column',
              width: '200px',
              border: '1px solid black'
            }}>
            <p>{product.title}</p>
            <p>${product.price}</p>
            <p>{product.description}</p>

            <button onClick={() => console.log(product.title)}>Console</button>
          </div>
        ))}
      </div>
    </div>
  );
}

Don't forget to import useState 😅



import React, { useState } from 'react';

Okay! Fingers crossed!

build -> start -> localhost:3000

BOOM! 💥

We have created a very simple, but working React Application with Server Side Rendering!

Almost as good as Next.js itself 😁 Gret job!

Conclusions

No conclusions 😁

You've done a great job coming so far! Round of applause for you!

We dug a bit deeper into the hows of Next.js and next time, we will go deeper or broader. How about we dive deep into how App Router works under the hood? 👀

Ask your questions below if you have any and please share this article with those who have doubts on Next.js SSR.

Find me on X 👋

// Detect dark theme var iframe = document.getElementById('tweet-1693037630890406064-339'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1693037630890406064&theme=dark" }

A Step-by-Step Guide to Deploying Vue Storefront Application on the DigitalOcean App Platform

Sergii Kirianov — Fri, 24 Feb 2023 10:57:34 +0000

Building an application is a complex process, however, this is only half of the work that has to be done. Once the application is built, it must be deployed, so that the world can visit your new online shop. This is a critical step and, in this article, we will focus on the technical aspects of deploying Vue Storefront on DigitalOcean.

This guide is intended for developers who are familiar with both Vue Storefront and DigitalOcean and are looking for a step-by-step guide to setting up the eCommerce application on the cloud-based hosting service. By the end of this article, you will have a fully functioning Vue Storefront instance hosted on DigitalOcean.

So, if you're ready to dive into the world of cloud deployment, grab your favorite text editor and let's get started!

Prerequisites

For this article, we assume that you already have hosted a Magento 2 instance and your Vue Storefront application is fully connected to the Magento 2 platform.

You’ll need:

Account with DigitalOcean
GitHub repository with Vue Storefront application source code
Environment variables for the Vue Storefront application
A bit of patience 🙂

Once you have all of the above, let’s start with creating a DigitalOcean application.

Creating DigitalOcean application

Step 1: Create a DigitalOcean App

To create a DigitalOcean app, go to the sidebar and click "Apps". DigitalOcean's application platform allows you to set up a CI/CD from your source code and redeploy it on every new commit to the branch of your choice. In this article, we will be using GitHub to store our Vue Storefront application.

Click on the "Create App" button and let's configure our repository. You will be prompted to choose the service provider, repository, branch, source directory, and “Autodeploy” if needed. We have opted for auto-deploy so that every time our branch updates, it will trigger a redeploy. Click "Next" to continue with the setup.

Step 2: Allocate Resources

On the Resources page make sure you check the Edit Plan button, you may be charged additionally in case DigitalOcean decided to spin up multiple containers. Set the containers to 1 or anything that is suitable to your needs. Click “Next” to continue.

Step 3. Setup Environment Variables

In this step, you can provide the Environment Variables - open the .env file you are using for your locally running application and paste it here - don’t worry, we will be able to change it later on.

IMPORTANT: To deploy successfully on the DigitalOcean App Platform you have to change the values of your environmental variables. Please follow the guide below:

VSF_NUXT_APP_ENV=production
VSF_NUXT_APP_PORT=8080
VSF_NUXT_APP_HOST=0.0.0.0
VSF_STORE_URL=https://0.0.0.0:8080

Step 4. Review the configuration information

Click through the next steps and review all the information you have provided, when done, click “Create Resources” - you will be redirected to the application dashboard. Let’s wait while our application is building.

When you first build your application, you will get your Live URL, if you visit it you will see an error in your console and network tab, this is because DigitalOcean will try to run API middleware on an HTTP host we can’t access due to the Mixed Content policy. To fix that, we will need to make another adjustment to our Environment Variables.

Configure Environment Variables

In your App Dashboard go to the Setting and click on Components: <<PROJECT_NAME>> - in our case it’s vsf-deploy-article. Find the Environment Variables menu and click Edit.

Change the following variables with the URL of your Live website with the API route.

API_BASE_URL - <<YOUR_APP_LIVE_URL>>/api
API_SSR_BASE_URL - <<YOUR_APP_LIVE_URL>>/api

Save your changes. This will trigger redeployment.

Once the build and deploy step is completed, you will get a notification that everything is OK and healthy. Now you can visit your Live URL. Let’s do that.

Our Vue Storefront application is up and running! Congratulations! 🥳

Conclusions

It was pretty easy! We have deployed our Vue Storefront application fast and effortlessly thanks to the capabilities of the DigitalOcean App Platform. Now your store is available for everyone in the world! Of course, this is not the end of the journey and you will need to set up a proper domain name too, but this is pretty and you can check it in the DigitalOcean documentation - How to Manage Domains in App Platform.

Even though this method is very simple and straightforward it is not the best solution for a large enterprise application- but, luckily, Vue Storefront has got you covered! Vue Storefront Cloud provides the solution for Enterprise clients to cover all your hosting needs (also reach out to me if you’d like an introduction to the right person to guide you with that).

Feel free to contact us on our Discord server for any matter if you have questions about manual deployment with Ubuntu droplet or other Vue Storefront-related questions.

Find your first job as Junior Developer

Sergii Kirianov — Mon, 20 Jun 2022 22:43:35 +0000

You were working hard, congratulations!

You've studied long hours, fight scary bugs and weird terminology, and built some cool and not-so-cool projects. You are here. You are ready to start searching for a job, aren't you?

Well, most probably the ones, who are about to search for their very first job, are never ready enough for it. Feels like diving from a high platform in a swimming pool. You are hesitant and think you are not prepared enough or not good enough. You can climb down of course, but at my University swimming pool, the platform stairs were so bad, that it was actually even scarier to climb down. For many, it may resemble a fear of dropping everything they've gone through to learn to code. It's fear of being a failure. Though, I don't think you are a failure even if you have decided to drop it.** You're definitely not a failure! **

So, what to do now? You are afraid to jump and you don't want to drop all you have succeeded till now.

Jump.

The fun fact is, the chances that it will be way easier next time are very high. But, normally people don't just go to the highest platform and jump immediately, right? First, they prepare for it by jumping from the smallest platform, then - a bit higher, higher, and finally, they are ready for the last one.

Below, we will go through different techniques that will help you to nail the job search and finally get a job. Let's go from the very first and the lowest platform and slowly reach the highest in order to finally conquer it.

1.5 m platform - Get your papers ready

In its 2018 Eye-Tracking Study, Ladders Inc. revealed that the time recruiters spend on the initial screen of a resume is up from an average of only six seconds in 2012, but only by about a second. Today’s recruiters skim resumes for an average of 7.4 seconds.

Let's assume that you already have a decent portfolio of projects that you can showcase to the companies to prove your skills. There are myriads of articles on what projects are good for the first try, but in case you want me to give you a list of cool projects to build for your portfolio, please leave a comment below 😉

// Detect dark theme var iframe = document.getElementById('tweet-1534252903585792004-508'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1534252903585792004&theme=dark" }

When I say portfolio, I don't say that you must have a portfolio website. It may be useful, though it can be harmful too. It depends a lot on your specialization and skills. I would recommend you read this article that might help you to decide - Don't waste your time on a portfolio website. Or, you can also check the replies in the tweet above, there are some great advice and opinions.

By portfolio, I mean anything that can prove your work, whether these are live websites, GitHub repositories, or even blog posts. Anything that can show your skills, knowledge, and passion.

What we will focus on, this time, is resume and cover letters. Yes, not every single company requires you to have a cover letter, but having one will definitely help, once you will get to an application spree.

My favorite "go-to" cheatsheet for both of them is Harvard - OCS RESUMES & COVER LETTERS. It has an amazing list of keywords that will make your resume professional. Examples of resumes and cover letters. Just trust me, it's only 10 pages, give it a read and most probably it will deserve a space on your hard drive (or SSD if you're rich 😏).

My personal recommendations about your resume:

Keep it short - one-page resumes are best. If you can structure information in an accessible and readable way for quick glance check - great!
Make recruiter life easier - do not list all technologies you have ever touched. Highlight technologies that are applicable to a current job you're applying to and keep others aside / remove them.
Keep it formal - yes, we live in a modern unicorn world full of colors and free template resume designs. Trust me, however deep you'll search for a resume template, the chances that somebody has used it already are extremely high. And just somebody but many somebodies. Make a clear black-on-white resume.
Once again, structure information - if your resume is in English (most probably it is) - the person who will review your resume will for sure review it from top to bottom left to right.
Make it flexible - you've heard about targeted marketing, right? It's a good idea to align your resume for a position you're applying for. Especially, in case you're well versed in different programming languages.
This is a LIVE document - don't forget to update your resume even if you found a job already. Add as many points as you can while you're learning or getting experience, it will help you to find the most important topics later on.
Evaluate yourself - either it's a community review, or you want to run your resume through an ATS scanner. Do it. You'll learn a lot about how good your resume is. There are multiple ways to do it: ask people on Twitter (as I did, see thread below), ask Redditors in subreddit like r/learnjavascript, r/learnpython and many others, or find an ATS service that provides you FREE trial to check your resume.

One of the other options can use services that will create a professional resume for you and they charge from 20-40$. As for me, this is the last resort, but we are all differently tailored, so it may be best for you.

// Detect dark theme var iframe = document.getElementById('tweet-1454562595701202956-121'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1454562595701202956&theme=dark" }

My resume review request is on Twitter. Check the comments, there is some really good advice.

Resources to consider:

Cover Letters

Cover letters - I really hate them. While I can easily write an article for 2+ thousand words, I barely can write a great Cover Letter. Luckily, there are people like @Ali and their articles that will help you to get better at Cover Letters than me - How to Write a Cover Letter to Land Your First Dev Job.

To add a few points from me, please make sure that your Cover Letter is aligned for nearly every job if they have different requirements. Be aware, that some job postings include hidden "keywords" that you must include in your CV, otherwise it won't pass the screening by AI. Don't forget, this all is a game and you need to play by the rules and be good at it, especially for your very first role.

Quite a short part, ha? 😬

Jump

Your first platform is behind you, you submerged into the water in a matter of a fraction of a second, but the emotions were great! You want more, now you want a higher platform!

3.0 m - Polishing your projects

Imagine you are about to climb on the next platform, but after the previous collision with water, your swimsuit is torn. Most probably you don't want to get to the highest platform to jump with your ass shown to everyone around, right? Well, maybe you want, but I believe not. So, make sure your swimsuit is intact before going anywhere up.

It's quite often while building projects solo, we may overlook something here and there. It's quite often too, that some jobs require you to know let's say testing, but you have never done it. You don't want to be an appropriate candidate for this job just because of something simple like tests. Go to one of your latest projects and cover at least some part of it with tests, this will increase your chances to get a job drastically! By the way, if you're a web dev and have never tried testing, here's my latest article on the intro to Jest, have a look - Beginner's guide: Your first test.

You need to make sure that your projects are shining. Well, none of the projects in the world are actually shining, but at least you need to clean up the mess you've made. Top things I've noticed while reviewing some of the beginner's projects:

GitHub repository README.md file is not updated - make sure you remove default generated README files and add some documentation to your project. This includes: how to run the project, if the project is deployed - add the link to live view, list technologies used in the project, describe the purpose of the project and what is it doing, list the hardest part of the project, list what issues you had during development and how did you solve them (don't just say "I Googled them").
Clean up any unnecessary system outputs - remove not required "console.logs", "prints", "system.out.printlns" and so on. Your project must be production-ready OR at least mention in the repo that work is in progress.
If you are Frontend developer - PLEASE make sure your website is responsive enough. Ask your friends to run it, ask the community to run it and give feedback, do the lighthouse reports and check that your accessibility is good enough.
Write tests - see two paragraphs above.
Write comments - yes we know you've made this project and you know every single line. Oh, I mean you knew it two days back. Write comments saying why this function is here, not what this function does.
Check your variables - make sure your variables have good and self-explanatory names.
Split up your code - one single file of thousands of lines of code is not what people would expect to see unless this is on purpose. Extract your helper functions. Keep code clean.

6.0 m - Visibility does not hurt

The easiest way to get noticed is to be visible

I started writing a blog a few months before I even planned to start looking for a job. Currently, employers are becoming more and more demanding on what kind of developers they want to hire. You need to stand out from the crowd or at least be visible in it. Your writing is not only to get likes and comments, followers and haters. Your writing shows your potential employer that you are passionate about what you are doing. It shows that you've spent time outside of your coding life to share your knowledge and experience with others. Don't know what to write? Do you think you're too inexperienced to write technical posts? Well, we all were there. Write about your project. Create a dev journal and write how are you approaching and solving the problem of your project. What issues did you meet and how did you resolve them. Doing so you'll see, that more and more people are getting around. People with less and more experience. People who would like to help you or give you advice on how to avoid such problems in the future.

And by saying writing, I don't necessarily mean "writing", any content creation would be great. Whether it's writing, video blogging, streaming, podcasts, etc.

Another great option - engage with the community. There are many stereotypes about developers and techies in general, but you can forget about them. I have met many people online and in-person and they are awesome. Ask the community for help, it's not bad to ask. Ask some more experienced dev to take a look at your project, get their feedback, and apply changes (just don't lose personality in your projects). Make a group of people who are searching for jobs too and help each other on the way. Try to make a mock interview and ask each other the most popular interview questions.

LinkedIn - this is a whole game, there are tons of resources about it, and even the ones from LinkedIn itself are great. Read them and make your profile shiny.

I must admit though, that this is not everyone's path. Some people are more open and social, and they actually want to share this, some are not. This whole 6m platform is already high enough to be skipped and go for the highest one.

10 m - Highest One - Job search

You set your foot on the last step, you're trembling and still hesitant. You are ready, but no one is ready till they jump. You have passed all the platforms below and you know what to expect. So now, only the last step ahead is remaining.

Jump

You have everything ready. If you can afford it, your job search should become your full-time job, if you're time-constrained, at least try to dedicate a few hours a day. Even one hour a day would be good, to be honest.

There are tons of resources to prepare for the interviews and we are not going to cover them here. Those are made by professionals and I am not in a position to tell you something better. Just Google for those resources 😉

But what I can say - let's get to the grind.

I am completely self-taught, spent 0 dollars to learn, and got a job after two weeks since I started my search. At least I can share with you what I've done.

I won't share the websites I was looking for a job at. Why? Because it's pointless. Day after day, after day I was searching Google, Yahoo, DuckDuckGo, and Bing even for keywords: "junior developer", "junior web developer", "junior web remote", and "junior remote software", "junior frontend", etc. Every day, from 8 AM to 6 PM. I went even on 4th !!!! page of Google search results.

Yeah, I was playing a game on hardcore, trying to find my very first programming job remotely. But I did it, so can you!

You are ready for it and you can apply to jobs that have a degree as requirement. You are ready and you can apply to jobs that even have 3+ years of experience as a requirement. And yes, you can apply to jobs if you're not fully matching the requirements.

Try any job board available where you see even part of the stack you work on. Honestly, I was not applying for a job with the stack I have no idea about at all, but I've heard that for someone that worked out 🤷🏼‍♂️

What I'm saying is - jump.

rejections

Don't get too disappointed to get rejections. We all are getting them. Even people with 10 years of experience are getting rejections at times. The reasons for that are nearly infinite, so don't even bother to worry. BUT. Make sure that after a certain amount of rejections you re-evaluate your resume and CV, because it may be the problem.

In the water

After all the tension you finally fly down into the water. Submerged. Excited. The fear is still present, but it's somewhere down in the emotions call stack. Right now you've made that step and from now on every next step will be easier. Looking for jobs won't be as scary as before. It will just become, well, a necessity or desire to get to a better place. Most importantly you've done it and you are searching for a job. Congratulations!

If you liked this article, please share it with your friends it will be a pleasure for me if this article will help anyone, even a single person. Also, if you want to have a chat or maybe set up a mock interview, you can find me on Twitter @SergiiKirianov.

Thanks a lot for reading and see you soon☺️

Beginner's guide: Your first test

Sergii Kirianov — Sun, 05 Jun 2022 15:50:51 +0000

We always hear a lot about testing

We always hear a lot about testing. It's literally everywhere and many of us have no idea how to start, what tests to write, and what's the point of tests?

I'll try to give you a very basic introduction that will be easy to understand. We will use JavaScript and Jest Testing Framework. But first, let's start with very very basic stuff.

Why do we need tests?

Because.

But if we talk seriously there are a lot of reasons for that, let's take a look at some:

You ensure your code is doing what it is supposed to do
You ensure that the app behaves as expected
You ensure people don't hate you
You prevent bugs creeping in

So that's fine, we all more or less understand that. Testing is something being done in any industry and this is in fact the standard. You can't neglect testing after a repair, manufacturing, or anything that may endanger somebody or destroy the user experience. Though it's heavily neglected with the beginners.

You may wonder - "I'm a beginner, why should I learn testing?". The answer is simple, many companies that are about to hire you, want you to understand the testing and at least have some minimal experience with it. If you cover your portfolio project with some unit testing - you're 100 steps away from your competitors.

Terminology

I'll make sure you understand.

Before we start, let's understand a few terms, nothing ultra-serious, but this will help you to understand a bit what are we even talking about.

Unit testing - "is a software development process in which the smallest testable parts of an application, called units, are individually and independently scrutinized for proper operation." - in simple words, we are testing functions. We must test that function ALWAYS returns what we are expecting it to return.
Integration testing - "is a type of testing where software modules are integrated logically and tested as a group" - here you are testing different group components of the app to see that they work well together. Think of "if this is sent to the backend, this is what has to be received and displayed".
End-to-end testing - "is a methodology used in the software development lifecycle (SDLC) to test the functionality and performance of an application under product-like circumstances and data to replicate live settings. The goal is to simulate what a real user scenario looks like from start to finish". Quite self-descriptive, but to say it in human language - we are simulating user behavior. User visits this page - clicks this button - this modal opens - enters this data - submits - receives the result from BE.

I told you, simple tests first - Unit testing

Hope you're ready because this is going to be hard!

Nah, it won't.

The good practice writing tests is following the TDD - Test Driven Development approach, but not in our case. Let's first understand how to write them, before going into complex details of the TDD approach.

Okay, let's write our first function. This is the approach I use when I have to write a function, so follow along.

**Task: **Write a function that takes a string of any size and creates an abbreviation.

Input: a string of any size

Desired output: an abbreviation consisting of concatenated capitalized first letters of each word in a string

Examples:

Input: "Advanced Business Application Programming" Output: "ABAP"
Input: "Object Oriented Programming" Output: "OOP"

Knowing this information we can split the task into small and easy-to-understand pieces.

// input: string = "Object oriented programming"

const createAbbreviation = (string) => {
  const arrayOfWords = string.split(' '); // ["Object", "oriented", "programming"]
  const arrayOfFirstLetters = arrayOfWords.map(word => word[0]); // ["O", "o", "p"]
  const stringOfFirstLetts = arrayOfFirstLetters.join(''); // "Oop"
  const upperCasedAbbreviation = stringOfFirstLetts.toUpperCase(); // "OOP"

  return upperCasedAbbreviation;
}

// output: "OOP"

I think this function is simple enough, but if you want to be a bit "special", the following function is exactly the same.

const createAbbreviation = (string) =>
  string
    .split(' ')
    .map((word) => word[0])
    .join('')
    .toUpperCase();

Okay, we have our function, we know what is it doing, so now we can think of a way to test it.
Let's initiate a project and install Jest.

Create a new folder and run npm init, just span Enter, we don't really care about our settings right now.

Now let's add Jest as a dev dependency. Open your VSCode and open the terminal. Once that is done, let's do the magic. Copy-paste this in your terminal and hit Enter: yarn add --dev jest. Congratulations, Jest is installed. In case you have an issue, please consult the docs. Few changes have to be made in your package.json, please go there and change the default test script command to this "test": "jest". Okay, you're all set, let's write that first test.

Create a new file named index.test.js - this is one of the default ways Jest can find test files. Usually, you don't write your functions inside test files, but we do it this way for the sake of simple configuration. Normally, you would have a dedicated file with functions and a separate file with tests.
And let's get to the interesting part.

Because of the way we thought of our function in the first place, we know what should be the input and what kind of output we should get. So let's do the same thing, but with JavaScript. Jest has its own syntax, so if you want to learn more - read docs. For now, we will use the most common syntax.

const createAbbreviation = (string) => {
  const arrayOfWords = string.split(' ');
  const arrayOfFirstLetters = arrayOfWords.map(word => word[0]);
  const stringOfFirstLetts = arrayOfFirstLetters.join('');
  const upperCasedAbbreviation = stringOfFirstLetts.toUpperCase();

  return upperCasedAbbreviation;
}

describe('Test createAbbreviation function', () => {
  it('creates abbreviation', () => {
    expect(createAbbreviation('European Union')).toEqual('EU');
    expect(createAbbreviation('Public Announcement')).toEqual('PA');
    expect(createAbbreviation('Very long name with more than five words')).toEqual('VLNWMTFW');
    expect(createAbbreviation('single')).toEqual('S');
  });
});

Let's go line by line and see what this code is doing 👇

First, we create a test suite that defines the name of all tests inside it. A good practice is to have one single describe in the test file.

describe('name of the test suite', tests_functions);

Then inside test suites, we are finally writing the actual tests.

it('name of the single test', single_test_function);

Now, remember what we were talking about previously, we need to make sure that every time the input we give to a function always returns the exact same result. So, we are expecting the result of the function with example string to be equal to that output.

expect(createAbbreviation('European Union)).toEqual('EU');

Hooray! Our first test is done! Now, let's run it! Go back to your VSCode terminal and type yarn jest to run the testing script and you should get something similar ❤️‍🔥

You're the boss

As you see, testing is not that hard and it's pretty easy to start with. If you approach a function/task in a proper way understanding what should be the output, you already know how to write the test. Of course, our function is very primitive and it does not include many edge cases, but for the sake of understanding, it's good enough.

If you're interested in E2E testing with Cypress you can check out my introduction article End-to-End testing with Cypress.

Thanks for your time and I hope this article opened up a door to the testing world for you. Even if just a bit ☺️

You can contact me on Twitter @SergiiKirianov if you have some questions, or leave them below in the comment section

Tech Community is blind

Sergii Kirianov — Sat, 28 May 2022 23:10:59 +0000

The Numbers

Disclaimer: numbers are taken all over the world in general and some are from the US, UK, and EU since the data is mostly available for those regions.

As per WHO there are more than 1 billion people in the world with visual impairment, more than 1 billion people with some form of disabilities, and between 110 to 190 million people aged 15 and older with significant difficulties in functioning. Those people are struggling in day-to-day life, because the environment we live in, though on the way to make life easier for them and more accessible, is still not ready. Bureau of Labor Statistics (US) has reported in 2021 that out of all people with disabilities only 19.1 % are employed.

The numbers are bad, though not surprising at all. The daily commute to work is hard, availability and accessibility of public transportation need a lot of work to be done. So what would be the best solution for them? Well, I would say working remotely would be great, also becoming a developer would be really great! What can be done to attract more people with disabilities to the Tech industry? What can be done to make their developer experience seamless and accessible? What can be done to make Tech more Diverse and Inclusive? Let's find out what has been done so far and what has to be done still.

Spoiler: not much has been done and a LOT has to be done.

Accessibility

Most of us are familiar with this topic, some are even evangelists and professionals advocating for accessibility. But have you ever thought of accessibility for developers? How can we call ourselves Diverse and Inclusive if we can't even help people to enter the same field we work in? Most talks about accessibility are aimed at user experience to cover more and more user groups and create an accessible environment for potential customers.

The user-centric design and workflow are great, we do attract more users, more money, and more innovation. But we are being selfish. We don't think about our own potential colleagues. What hypocrisy, right?

During one of the conferences in Brussels, I asked the speaker who had a talk about user accessibility what he thinks about accessibility for developers. Well, nobody could answer the question. I've seen the eyes of all people who looked at me when I asked the question and I saw no answer in them. I realized, looks like most developers never asked themselves this before...Sad.

The biggest issue is that basically, it's extremely hard to find any information on tools for developers with disabilities. The moment you Google anything, most of the results are tools to help you create accessible apps, but not accessibility tools for developers.

Think about it. Even the learning content is so spoiled. Yes, there are lots of courses and guides on how to start, how to learn language X in Y time, and how to set up the project. There are a lot of text guides, but also there are guides that are videos...with code snippets that they show you on the screen...in the video.

So is there anything?

Tools and why they fail

The most common tools for accessibility on an OS level: are a screen keyboard, voice-to-text, voice control, and a screenreader.

I think it's quite obvious even without me explaining it, why those tools are basically useless for people with disabilities who want to start programming. But let me give you a few examples so you can feel all the pain.

Screen keyboard

Needless to say that speed of development using the mouse as a single input would be terrible, especially how verbose the code can be and how much stuff we actually type, we barely think of it in terms of characters. After a short research, I have found out that an average programmer makes at least 10-15k keystrokes during a normal working day. This tool is basically one of the "soft" tools that can be used. It basically requires you to have at least hand and the ability to see, which is not always the case.

Voice-to-text

We all are in different conditions and for people who have limbs, it's extremely hard to imagine how to type / work / do your chores without hands. And now imagine that you have to write any function bigger than 10 lines of code by your voice, jump from line to line, manipulate cursor position, navigate between tabs/windows/ etc. Well, I doubt you can. It's extremely hard, I've tried, and trust me I couldn't do any of what I do during my normal daily workflow.

Voice control

Should I tell you that if your English is not "clear" enough or if you don't speak in a particular way - no control for you...My English is pretty okayish, but hell no this thing will ever understand me. For more insights on voice control day-to-day life of a developer, you can check this article What Software Development Looks Like When You Have a Partial Disability. Keep in mind, this is a partial disability, just a hand.

Screenreader

I'll give you the quickest example to understand how bad things are. You're a blind developer and Webpack bundling error generates 100+ lines of errors because of a typo in a component...

I have really just touched the tip of the iceberg, there are way more issues. Issues we don't think about on a daily basis, things we don't pay attention to, things we don't care about. We - developers, we the ones who try to make the world a better place, or at least we say so, we fail to see how bad the whole ecosystem is for people with disabilities. We are gatekeepers for so many people. We have done minimum to open doors for those people who really need it, for those for whom this job could be a gamechanger, a golden ticket to the world.

As I said, we have done the minimum, it's progress, but we are so far from at least OKAY.

What has been done?

There are quite a few initiatives to try and open the gate. I would like to "shout out" them and tell you about them.

Serenade - a project created to involve more voice control for development. Voice-to-code tool specializing in writing code by voice uses a code snippets approach and is quite easy to use. But. It's still primarily targeting the developers who have no issues such as disabilities. They don't target people with disabilities specifically and so - paywall...
Microsoft AI's research on the tools for people with disabilities - is quite a new initiative by Microsoft, still in the working stage, but already has done some real impact and serves as a pathway for those who want to contribute. You can read more about it here Inclusive Coding for Disabled Developers
The list is....short. Really, it's damn hard to find anything. Leave the tools you've heard/know/use in the comments. I would love to test them.

Ask yourself a question

Life is unpredictable. Think about it. Right now you're healthy, this is a gift you have and at most do not realize. You have a job, you love being a programmer, at least I hope you do.

Ask yourself a question "Am I secure at this job?". What would happen to me, my career, and my skills if due to a force major something happened to you and you've got a disability. You lost your arms/sight. Are you able to continue your job? Do you still feel secure? Well, personally, I would think that this is the end of my career. Though I still have the skills, and knowledge to do it. I still can work remotely as I am doing it now. I still can use a computer and sit in front of it for hours. I still can, but unfortunately, I can not work. Isn't it weird?

What needs to be done?

Around 64% of people with disabilities are internet users (An analysis of the digital literacy of people with disabilities in Korea: Verification of a moderating effect of gender, education and age).

For now the most important is awareness! We need to put more people into a state of awareness, educate people on the matter, and start building, innovating, and delivering. We all have got the benefits of working remotely, now it's time to let people who actually have to work remotely join us. Brilliant, smart, innovative people who could be a great asset to the industry. People who will build and contribute to accessibility as no one else would. People who would care.

We need to get the attention of big corporations and influencers to speak out loud about these issues. We must create a friendly community of allies, who would provide assistance to onboard people with disabilities. We must make sure that products and resources are free for those people. We must create a smooth and fast track for them. We must create specialized software for them.

Do you know why there are no tools? Because people with disabilities treat being a programmer as inaccessible to them. This job is a "no go" for them. And this is why we must make sure that our field is as accessible as possible.

Teaching, Creating, Delivering

What's the plan?

You can easily break a stick, but you can't break sticks in a bundle

I would like to gather more people, more creative people, and more empathic people who would be willing to contribute and spread the awareness. If you're one of them, please reach out to me on Twitter - @SergiiKirianov, I would like to grow this community and start creating meaningful products, guidelines, and learning resources. Spread the word.

I believe that this is possible!

Imagine Scope

Sergii Kirianov — Mon, 27 Sep 2021 01:53:55 +0000

Step by step we are on the way to understand JavaScript Engine better. We have seen how JavaScript creates, executes and navigates through the world of script. We were exercising our imagination last two posts. This time we need to try harder 💪

If you need refresher on Execution Context and Call Stack consider reading last two posts 😉

Imagine Execution Context and Hoisting

Imagine Call Stack

We already know that JavaScript function is a world. The tiny world inside big Global world. Today, we are going to create the first city. The "Function City".

Welcome to Function City! 🌃

Imagination ON 🌈

Each city need to have buildings and houses (it's same thing, aha). Every city has items and goods for citizens too, so that they can use it - buy, sell, cook, wear, etc. Buildings can be goods too, like a private property. Citizens use buildings too.

City needs a Mayor. And Mayor of Function City is beloved by all! She is a very kind and generous person. City has it's own assets and goods. These goods are public and free for everyone. Every household have access to them.

As in any modern society everyone has their private goods, which citizens keep inside their houses. Some, on the other hand, have some priviliges and can change the goods available for citizens.

Of course, city is not complete without helper buildings, so that citizens can interact with them. Restaurants, Cinemas, Shops, etc. All this buildings offer you their services and are functioning in the city.

By the way, your sister Julia works in one of those. She works at Translation Services Agency. How this agency works you wonder? So you pass them your documents (goods), they process it and return result back to you.

There are so many goods in the city which are public and Agency has access to them. The Agency can actually change and process this documents if needed.

So, looks like a nice city right? It is. But a little weird too. Mayor can change the meaning of the goods. What? What does it mean? Let's say, today you had a car, then Mayor has reassigned another item to your car and poof....now you have a carrot.

There are set of words, which were given by the creator of this whole world. Those words can't be changed. No one can reassign them. Also, citizens do have some common sense. When they were building the city, they made a list of constant words which cannot be reassigned too. Whole city depends on these words.

Imagination OFF

Phew...this one was a hard abstraction to make up. I've tried to make it simple, yet meaningful.

Any constructions like building are representing functions. Do you remember the small world in the big one thing? Just like your own house is a small world in the big world. The goods are values. Names are variable names. Any item can be reassigned to any name, except for those rules.

Scope

Before EcmaSript 2015 (ES6) only var was available and scopes were a real issue. Variable declared with var would be accessible everywhere within the script and could be redeclared. ES6 introduced let and const variable declarations. They have block (local) scope and var was almost completely replaced.

So what is Scope? 🤔

Our scripts are full of functions. Functions as we know can take arguments, they have their own local Execution Context, they can have own local variables. This - is Scope. The Scope of the function. It is like indoors of the buildings that we have imagined. Private. Secure. You can interact with outer world from inside. But outer world cannot interact with you.

Functions can have functions inside and those will follow the same rules. Let's look at example:

function example (a, b) {
  console.log(a);
  function inside () {
    let c = 'Hello';
    console.log(c + ' world!');
    console.log(b);
  }
  inside();
}

Looks confusing right? Try to remember all that we have learned so far. What will happen first? Global Execution Context. At Creation Phase all the code will be read by JavaScript Engine and stored into memory. function example() is completely stored into memory and ready to be invoked. Creation Phase is over at this point. Execution Phase starts. Execution Phase will go through the code and once it reached example() it will invoke it. What's next?

Once function example() is invoked the Function Execution Context will start. If you remember, it's almost same as Global. The arguments object will be created and store our a and b arguments. console.log(a) is also a function and will be stored into memory. function inside() will be stored too. Then it's time for Execution Phase again. console.log(a) will be invoked and print statement in console. Then once it will reach inside() again the same thing is going to happen. Function Execution Context will start.

Hope when you look at this step by step it became much easier to understand. Every Execution Context can have access to the parent Execution Context variables. But parent doesn't have access to it's child ones. Parent Execution Context can only pass data as arguments.

Example output

  example('Yo!', 'You are the best =)');

  > 'Yo!'
  > 'Hello world!'
  > 'You are the best =)'

Can you trace what happen? What will happen in this case then?

function example (a, b) {
  console.log(a);
  b = 'See you around =)';
  console.log(c);
  function inside () {
    let c = 'Hello';
    console.log(c + ' world!');
    console.log(b);
  }
  inside();
}

Try to use your imagination. Try to imagine those scopes, those locked houses with private data. Can somebody access your goods inside your house?

I think you have managed it. But what if we declare c before and then try to declare it again with var?

function example (a, b) {
  console.log(a);
  var c = 'Hehehe I am nasty var';
  b = 'See you around =)';
  function inside () {
    var c = 'Hello';
    console.log(c + ' world!');
    console.log(b);
  }
  console.log(c);
  inside();
}

Are we those privileged citizens who can change c on their will? Yes we are. var declaration is happening in Global Scope (available everywhere in the program) or in the Function Scope (available only inside the function and other inner functions). var can be reassigned and even redeclared.

let a = 'hey I am an a!';
let a = 'now I am z!';

  > Uncaught SyntaxError: Identifier 'a' has already been declared

var b = 'hey I am b!';
var b = 'now I am z!';
console.log(b);

  > 'now I am z!'

Now after this code snippet, if you could not manage the previous one, have a look again.

Summary

JavaScript scopes may be confusing. It may be daunting and hard. But hey, we all have passed through this. Try to practice with scopes. Play with variables in different parts of your script and functions. Try to nest 10 functions and before you run it, put everything on paper. How are you expecting console.log statements print out. What will be the order? Make it harder. Add let, const and var inside your functions and try to reassign and redeclare variables. Put on paper. Can you still trace them?

I bet once you do this exercises few times, you will see the picture. You will be able to folow the data flow from the arguments passed to the first function and down to the most inner function. Imagination is what I want you to engage.

Hope it was not confusing and helped you. Even a little. It was a great help to me too. Writing this post was hard and imaginary world is not perfect.

See you around!

Imagine Call Stack

Sergii Kirianov — Mon, 20 Sep 2021 01:56:37 +0000

In last article we have discussed how the JavaScript Engine reads through our code and executes it. A lot of guides and courses treat this information as an advanced topic and jumps straight into coding. If I had the knowledge of this processes when I started it would be so much easier for me to understand why things happen as they happen. We went through the very fundamental process in JavaScript Engine runtime, now let's have a closer look how Engine runs your code.

Today we will learn something about Call Stack.

Call Stack

The Call Stack is a mechanism, which allows JavaScript Engine to keep track of it's location inside a script. It is a data structure. Array of some kind. Array where things are getting pushed into it and popped out.
As mentioned in the last article, after everything is set up, the Execution Phase starts. Using Hoisting it can access any function within your code. So if you have nested function inside other function, and that function has many more of them inside, how will JavaScript understand what is it location now within your code?. This is where Call Stack kicks in.

Let's stack those calls.

Imagination ON

You are function. Let's say, your name is Tom. You need to go to the mall, but you can't find the keys from his car. You searched all the house upside down but failed to spot them. Maybe your sister Amy took them or brother Ryan? Let's find out. You pick up the phone and call your sister function Amy.

Hey Amy, have you seen my keys?
Let me have a look. No, I can't find them either. Hold the line, I'll call Ryan.

You are waiting for Amy to complete the execution of a task she has. Your family has strict rules, you cannot just proceed to anything else, until Amy returns to you with the answer.

Hey Ryan, it's Amy. By any chance, have you seen Tom's keys?
Hello Amy. Just give me a moment, I'll have a look.

Now, Amy waits for Ryan to complete his task and return to her. You are still waiting for both of them, you know the rules. You see, the calls are in the stack.

Yeah I found them Amy. I'll return them to you, just pass it back to To, okay?
Thanks! Sure, I'll do.

Now, the execution of Ryan's task is completed and he is out of the stack.

Hey Tom, we found the keys, I'll return them to you now. Thanks for waiting!
Oh, that's sweet, thanks Amy!

The execution of the Amy's task is also over. She hangs the phone and out of the stack now. Last thing is for Tom to return to his task, to go to mall and complete it.

Imagination OFF

Back to JavaScript.

When first function is invoked it is pushed to Call Stack as a foundation. If there are no nested functions inside the first one, once it is completed it is removed from the stack. Function are pushed and popped off the stack in the Last In First Out way. Imagine a stack of dirty plates at the sink. Last plate put on top will be the first plate to get washed.

JavaScript Engine is a single threaded and it's synchronous nature means that is can do only one thing at a time. Until that task is over, the Engine can not proceed with next one.

Let's take a simple nested function as an example:

  function main() {
    one();  //can we call function one() before it's declaration? 
    console.log('Message from main function');
  }

  function two() {
    three();
    console.log('Message from function two');
  }

  function three() {
    console.log('Message from function three');
  }

  function one() {  //yes we can. this is what hoisting is. if you are not sure why, check the last article
    two();
    console.log('Message from function one');
  }


main()

Now we are JavaScript Engine and we are going to build the stack. First function to add to our stack will be function main. main calls function one, it is added to the stack and function main waits for it to finish. one calls two and then two calls three. What will be the last function added to the stack?
If you say three you are almost there. Actually, when function three is added to the stack it also calls function console.log (we will not go deep to the implementation of console.log to simplify) and this console.log is the last function we add to the stack. Let's have a look at our stack, before we start popping things off it.

You can see, that other console.log were not added to the Call Stack just yet. As mentioned earlier, JavaScript Engine will not proceed with the next task, until first one is completed.

Okay, now we start popping things off the stack. Is it only popping things off or we will push something more into the stack?

console.log on top of the stack has printed in the console and was popped off the stack. Function three has no more tasks and also popped off the stack. Next, function two still has another function inside - the console.log. Now, this console.log will be pushed into the stack on top and all other functions will wait for it to complete. Things are going to be popped off and pushed into, until the reach the last main function, after it's execution, the stack will be empty and JavaScript will proceed to execute next portion of your code.

The Call Stack can get very complicated and it may become very hard to track things. The more functions are nested inside other functions the harder it gets.

Thing to note. All this process is lightning fast unless heavy computation is involved

Stack Overflow

Except for being a developers Mecca, stack overflow is the process when your function calls itself and does not have any exit point. I called it process, but it is actually a tool which spots this infinite recursion and prevents your computer to blow up :D The Call Stack will grow and grow, until it reached the limit of the memory and cannot grow anymore. This is where you will get stack overflow error.

Summary

Is it better now? I hope it is. Call Stack is only one of many things happening under the hood when you run your code, but it is extremely important to understand in which order your functions run and how JavaScript Engine treats them.
The implementation in the imaginary world and example is the synchronous. JavaScript has evolved a lot and asynchronous approach is the new gold standard. We will get to that point in future articles, but understanding of synchronous way is a must. I want to make sure that we will have everything necessary to proceed with more advanced topics.

A few words on recursion

I have mentioned recursion at the stack overflow section and even we are now ready to get familiar with this concept, I would suggest to keep it for later. Recursion is just a tool and it is not required right now for understanding of the basics.

Please, imagine what you are reading. Even though the pictures are provided, try to use your imagination. Create this blocks in your head and go through the example, stack them on top of each other and pop them off when they are done.

As usual, comment if something is wrong, contact me if you need clarification, suggest if you want!

See you around.

Imagine Execution Context and Hoisting

Sergii Kirianov — Sat, 18 Sep 2021 22:52:30 +0000

JavaScript fundamentals may be overwhelming and difficult to understand. This blog posts are reflection of my understanding of concepts and aimed to help others, who may struggle to grasp them.

Today we will look at the fundamentals of how JavaScript running behind the scenes. Today we will be JavaScript ourselves.

Execution Context

What is this? Execution Context is the process JavaScript Engine is using to interpret your code. It is simply a splitting of one big and complicated task into small easy steps. Understanding of this topic is essential to see the big picture. Other advanced topics will get much clearer once you get it.

Global Execution Context

JavaScript "reads" your code from top to bottom. Line by line, like you read this post. The first thing happens when you run your .js file is the creation of Global Execution Context. This process consists of two phases: Creation and Execution.

Creation Phase

Imagination ON

You are the writer. You want to write a new book. What will you do first? Right, create the world. You will create a foundation of the story - the world, where your characters will exist and live. Like a global object everyone refers to. this world.

Once the world is created, you want to add some characters, right? Empty world is no fun, you know. Somebody who will interact with each other and the world. Let's do it. Let's declare their existance and function.

A while after, the story is completed. The book has become a new bestseller. Hollywood wants to film it now.

Imagination OFF

When JavaScript Engine parses your code it creates a global object window and variable this which refers to that object. Memory is allocated for variables. Their names stored and assigned a value of 'undefined'.

  var foo = 'bar';
  var person = 'John Doe';

  function sayHi() {
    console.log('Hello world!')
  }

  sayHi();

JavaScript running in the browser will create window object and running in Nodejs will create global object.

Execution Phase

Imagination ON
Now, you are a famous Holywood Director, you've got the script for that new book everyone is talking about and big bosses wants it to be filmed. The world has been created for you already, it just needs to be brought to life. You have noticed, that script is not written very well and sometimes new characters appear in the middle of the chapter. But you are a visioner, you are well known for following the scripts like a machine, no one can say that book was better.

You start hiring actors and assigning them to the characters. Then. Camera! Motor! Action! You are filming them acting, functioning.

And that's it. Movie is ready. Oscar is your, no doubt.
Imagination OFF

At the Execution Phase the JavaScript Engine is assigning values to the variables stored in memory and ininitializing functions.

Creation and Execution Phase

The Execution Phase starts when Creation Phase is over. If you look closely, you will spot that because all the variables have been stored with value of 'undefined' during Creation Phase, you can actually call them before they were assigned a value. This leads us to the next concept - Hoisting.

Function Execution Context

Well, almost.

Function Execution Context follows almost identically same principles as Global Execution Context. Only difference is, that Function Execution Context is not creating another window object, as it can be created only once, but instead it creates an arguments object. This "arguments" object is local and accessible only within the context of that function.

It is like the world created inside the global wowld.

Hoisting

During the Execution Phase variables declared with var will be accessible, even before values were assigned to them, because they already store 'undefined' and it will not cause a Reference error. Variables declared with let and const will be only initialized during Execution Phase and values assigned at that moment, hence trying to access this variables before will lead to Refence error.

On the other hand, Functions have been fully stored in memory during Creation Phase, which allows us to invoke them even before they have been initialized at the Execution Phase.

Ability to invoke functions before initializing is called Hoisting.

Summary

I hope this was helpfull and made things clear. This is very fundamental topic, which I recently was not aware of and most of beginner guides are missing this. Even while I was writing draft of this post, I have got better understanding how recursion works. Please feel free to contact me if you find something wrong or if there anything you would like to add.

See you around!

Forem: Sergii Kirianov

Building Reactive CLIs with Ink - React CLI library

Getting Started

Starting a project

First CLI application with Ink

Building CLI File Explorer

Current Path and List of Folders/Files

Path and Files UI

User Input Handling

Navigating files in the current directory

In/Out Folders Handling

Bonus: User Hints

Conclusions

Learn Next.js Server Side Rendering by building your own implementation

Understand Server Side Rendering

Project Setup

Creating Node.js Server

Start New Project

Create a Basic Express.js Application

First React Component

Rendering React Component on The Server

Modifying Express App

Fixing Express / React incompatibility

Let's Make It Real React

notNextServerSideProps

Calling notNextServerSideProps on The Server

Rendering React Component with Props

I Said Real React

What is Hydration?

Create Client Application

Pass Initial Data to HTML

Adding initialData to HomePage Component

Running Client Application

Testing SSR React Application

Conclusions

A Step-by-Step Guide to Deploying Vue Storefront Application on the DigitalOcean App Platform

Prerequisites

Creating DigitalOcean application

Step 1: Create a DigitalOcean App

Step 2: Allocate Resources

Step 3. Setup Environment Variables

Step 4. Review the configuration information

Configure Environment Variables

Conclusions

Find your first job as Junior Developer

1.5 m platform - Get your papers ready

My personal recommendations about your resume:

Cover Letters

3.0 m - Polishing your projects

6.0 m - Visibility does not hurt

10 m - Highest One - Job search

rejections

In the water

Beginner's guide: Your first test

We always hear a lot about testing

Why do we need tests?

Terminology

I told you, simple tests first - Unit testing

You're the boss

Tech Community is blind

The Numbers

Accessibility

Tools and why they fail

What has been done?

Ask yourself a question

What needs to be done?

What's the plan?

Imagine Scope

Welcome to Function City! 🌃

Scope

Summary

Imagine Call Stack

Call Stack

Stack Overflow

Summary

A few words on recursion

Imagine Execution Context and Hoisting

Execution Context

Global Execution Context

Function Execution Context

Adding `initialData` to HomePage Component