Good to have

• A basic understanding of git.

• A GitHub account. If you do not have one, you can simply signup here https://github.com

So, what is it?

GitHub is a hosting service for Git repositories based on a distributed version control system. It's an online database that allows you to keep track of and share your Git version control projects outside of your local computer/server. Unlike Git, GitHub is exclusively cloud-based.

Before we dive in, let's clear up a common misconception: Git isn't the same thing as GitHub.

Git is a version-control system (i.e., a piece of software) that helps you keep track of your computer programs and files and the changes that are made to them over time. It also allows you to collaborate with your peers on a program, code, or file.

while

GitHub and similar services (including GitLab and BitBucket) are websites that host a Git server program to hold your code.

Github Alternatives

• GitLab

• GitBucket

• BitBucket

• Gitea

An hour before writing this, I was having a great Sunday and decided to do some of the easy katas in codewars. One of the questions I found required me to add one line of code to sort an integer array, easy right?

The sort() method sorts the elements of an array in place and returns the sorted array. By default, the sort() method sorts the elements in ascending order according to the Unicode values of the elements.

// input: [1, 2, 3, 10, 5]
function sortArr(input) {
 return input.sort()
}

// output: [1, 10, 2, 3, 5]
// 😡 expect output: [1, 2, 3, 5, 10]

So this got me 😡 but then if we are to go back and re-read how the sort method works, it by default sorts the elements in ascending order according to the Unicode values of the elements with Unicode values being highlighted.

So what is happening here:

The sort() method converts the numbers to strings and sorts them lexicographically (dictionary order) based on their string representations.

The Unicode code points for the characters "10" and "2" are:

• "1": U+0031

• "0": U+0030

• "2": U+0032

In the string "10", the character "1" has a lower Unicode code point than the character "2", which means that in lexicographic order, "10" comes before "2". This is why the sort() method sorts the array [1,2,3,10,5] as [1,10,2,3,5].

But we are not doomed,

that's how sort() works by default, but you can provide a function to the sort() (I guess that would make it the sorting function) to specify a custom sort order. so to sort elements in ascending order by their numerical values add this function.

// input: [1, 2, 3, 10, 5]
function sortArr(input) {
 return input.sort((a,b) => a - b)
}

//😃 output: [1, 2, 3, 5, 10]

In this example, the sorting function (a, b) => a - b subtracts b from a, so if a is less than b, the result is negative and a is sorted before b. If a is greater than b, the result is positive and b is sorted before a. If a and b are equal, the result is 0 and their order in the sorted array is unchanged.

You are sorted now, take that, elements :)

Hello Hope all is well, in this article I share on how to create a simple popup or modal component in reactjs using the useState hook. for the styles I will be using tailwindcss.

Your can checkout the video version for more details.

Create React App

First we will create our app with create-react-app, that's assuming you already have nodejs installed.

npx create-react-app react-modal

Adding Tailwindcss to a react js project

To install tailwindcss in reactjs is very easy. you will only need this few commands first make sure you are in the project folder that is you should be able to see the node modules folder and other folders plus files. then just copy and paste these commands

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then update the tailwind.config.js file, this should be in the root of your project, that is next the package.json file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then next, add these Add the Tailwind directives to your index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwindcss is configured

Installing React-icons

  npm install react-icons

This package will help us use the different icons, for this component, we shall use one in particular, the (IoWarning) icon, you can checkout React-icons for all the available icons.

Creating Modal using useState Hook

In the App.js file, we setup the button which will trigger our model.

import { useState } from 'react'
import Modal from './Modal'

function App() {
  const [popUp, setPopUp] = useState(false)

  return (
    <div className='p-20'>
      <div className='flex gap-8 items-center mb-10'>
        <div className='bg-gray-700 text-white w-16 h-16 rounded-full flex items-center justify-center'>
          CK
        </div>
        <div className='flex flex-col justify-center'>
          <h1 className='font-bold text-3xl'>Charles Kasasira</h1>
          <p className='text-gray-700'>Web developer</p>
        </div>
      </div>
      <button className='outline outline-1 px-3 py-2 hover:bg-black hover:text-white'
      onClick={() => setPopUp(true)}
      >Open Modal</button>
      {popUp && <Modal setPopUp={setPopUp} />}
    </div>
  );
}

export default App;

Modal Component This is our model component, you can watch more of the explanation on my youtube channel https://youtube.com/charleskasasira

import React from 'react'
import { IoWarning} from 'react-icons/io5'

function Modal({setPopUp}) {
  return (
    <div className='w-screen h-screen bg-black bg-opacity-30 fixed top-0 right-0 flex justify-center items-center'>
      <div className='bg-white p-10 rounded-md shadow-md'>
        <h1 className='font-bold text-center text-lg my-5'>Delete User</h1>
        <p>
          Are you sure you want to delete <b>Charle Kasasira</b>
          <p className='bg-[#ffe9d9] p-2 border-l-2 border-[#fa703f] text-[#bc4c2e] flex flex-col text-sm my-1'>
            <span className='text-[#771505] font-bold flex items-center gap-1'>
              <IoWarning />
              Warning
            </span>
            By Deleting this account, you won't be able to access the system.
          </p>
        </p>
        <div className='flex justify-between mt-5'>
          <button className='outline outline-1 outline-[#101f20] bg-[#101f20] text-white py-2 px-4 hover:bg-transparent hover:text-black'
          onClick={() => setPopUp(false)}
          >No, Cancel</button>
          <button className='outline outline-1 outline-[#101f20] hover:bg-[#101f20] hover:text-white py-2 px-4 bg-transparent text-black'
          onClick={() => console.log("Please like and subscribe")}
          >Yes, Delete</button>
        </div>
      </div>
    </div>
  )
}

export default Modal

And that's it. hope this was helpful.

First, the structure of the logo, (this is the HTML part).

The Instagram logo we are working on today is a gradient background and a rounded square with two circles, one in the center and the other in the top right to represent sort of a camera.

So to structure this, we will create a container class for our background containing an Instagram class that contains two classes circle and ball.

<div class="container flex">
    <div class="instagram flex">
      <div class="circle"></div>
      <div class="ball"></div>
    </div>
</div>

Positioning and Style - CSS

We will first style our body to remove the presets on the margin and padding and then center the contents.

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

container class

Then we will work on the container which will have the linear gradient as its background, plus the flex class which is shared by the container and Instagram classes in HTML. I have also added a animation zoom which I will work on last.

.container {
  padding: 15px;
  background: linear-gradient(225deg, #7f37be, #ea041e 70%, #f6c900);
  border-radius: 20px;
  box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.3);
  animation: zoom .2s;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

instagram class

The Instagram class is a rounded square so we will give it a border of 5px plus a medium border-radius, I went with 20px. then notice that I give it a position of relative, this is to help when positioning the ball.

.instagram {
  position: relative;
  border: 5px solid #fff;
  padding: 20px;
  border-radius: 20px;
}

circle class

.circle {
  padding: 20px;
  border: 5px solid #fff;
  border-radius: 50%;
}

ball class

.ball {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #fff;
  top: 10px;
  left: 70px;
  border-radius: 50%;
}

Finally, let's give our logo a little zoom animation at the start.

@keyframes zoom  {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.75);
  }
  100% {
    transform: scale(1);
  }
}

Using Arrays

How to create an array.

//1. using array literals
const arrayName = [1, 2, 3, 4]

//2. Using array constructor
const arrayName = new Array.from("foo")

How to read from an array

const arrayName = [1, 2, 3, 4]

//1. Using array indices
arrayName[0] // this returns a value at index 0 of the array.
console.log(arrayName[0]) // Output: 1

//2. Using the at() method
console.log(arrayName.at(-1)) // Output: 4

When reading from an array using indices, negative indices don’t work while when using the at() method, you can use a negative or positive index.

How to update an array

const arrayName = [1, 2, 3, 4];
arrayName[0] = 9; // this will change the value at index one to 9
console.log(arrayName); // Output: [9, 2, 3, 4]

How to determine the length of an array

const arrayName = [1, 2, 3, 4];
// use the length method
console.log(arrayName.length); //Output: 4

How to write to an array (adding elements)

// add an element to the end of the array
arrayName.push(4);

// alternatively, you could add an element at indices of the length of the array.
arrayName[arrayName.length] = 4;

// add element(s) to the beginning of the array
arrayName.unshift(element);

How to remove an element from an Array

// remove the last element
arrayName.pop();

// leaves only elements at a specified length of an array
arrayName.length = 1;

// to remove all elements
arrayName.length = 0;

// removes an element at index 0
arrayName.shift();

How to concatenate arrays

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]

// using the spread operator
const arr3 = […arr1, …arr2]
console.log(arr3) // Output: [1, 2, 3, 4, 5, 6]

// using the concat() method
const arr3 = arr1.concat(arr2)
console.log(arr3) // Output: [1, 2, 3, 4, 5, 6]

Array methods

slice()

> ['■','●','▲'].slice(1, 3)
['●','▲']

filter()

> ['■','●','■'].filter(x => x==='■')
['■','■']

map()

> ['▲','●'].map(x => x+x)
> ['▲▲','●●']

flatMap()

> ['▲','●'].flatMap(x => [x,x])
> ['▲','▲','●','●']

splice()

> ['■','●','▲'].some(x => x==='●')
> true

some()

> ['■','●','▲'].every(x => x==='●')
true

every()

> ['■','●','▲'].every(x => x==='●')
false

join()

> ['■','●','▲'].join('-')
'■-●-▲'

reduce()

> ['■','●'].reduce((result,x) => result+x, '▲')
'▲■●'

reduceRight()

> ['■','●'].reduceRight((result,x) => result+x, '▲')
'▲●■'

fill()

> ['■','●','▲'].fill('●')
['●','●','●']

sort()

> ['■','●','■'].sort()
['■','■','●']

reverse()

> ['■','●','▲'].reverse()
['▲','●','■']

includes()

> ['■','●','■'].includes('■')
true

indexOf()

> ['■','●','■'].indexOf('■')
0

lastIndexOf()

> ['■','●','■'].lastIndexOf('■')
2

find()

> ['■','●','■'].find(x => x==='■')
'■'

findIndex()

> ['■','●','■'].findIndex(x => x==='■')
0

Hope you found this helpful.

This might be important in some instances, like

• When you have to implement your own modal.
• When implementing context menus like twitter's context menu.
• It's good UX, that you can click-to-open something, and then not only be able to click that same thing to close it, but click outside to close as well.

HTML: the structure.

    <button onclick="toggleMenu()" class="btn">
        Click to Show
    </button>
    <ul id="menu">
        <li class="menu-item">Edit</li>
        <li class="menu-item">Delete</li>
        <li class="menu-item">Close</li> 
    </ul>

For the skeleton of the project, all I needed was a button that will toggle our dropdown on and off, plus an unordered list which will be our dropdown menu.

CSS: the style

.btn{
    background-color: #147;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 49px;
    font-weight: 500;
    cursor: pointer;
}

.btn:hover{
    background-color: #148;
}

#menu{
    display: none;
    position: absolute;
    z-index: 1000;
    min-width: 10rem;
    padding: .5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}

#menu.show {
    display: block;
}

.menu-item{
    padding: 8px 20px;
    cursor: pointer;
}

Went with close to the minimum styles to design the button and #myDropdown for the unordered list which starts with the display as none but is toggled with a show class setting the display to block with an event using javascript, for the behavior. !Important, You need to give the dropdown menu a position of absolute and z-index greater than 1 to appear to the top of other content if there is any.

JS: the behavior

const menu = document.getElementById("menu");

const toggleMenu = () => menu.classList.toggle("show");

window.onclick = (event) => {
    if (!event.target.matches('.btn')) {
        if(menu.classList.contains('show')){
            menu.classList.remove('show')
        }
    }
}

menu.addEventListener('click', (event) => event.stopPropagation());

Lastly, with javascript. I first defined the menu id, then on the toggleMenu() method which I call on click of the button, I toggle, (add or remove) the show class from the menu.

I am using arrow functions here, if you are not used to them, you could use the function declaration or read something about them. And that's it, as always you can have more fun of course with more css for fancy styling plus adding an animation.

Full Source Code: Github

What could I learn from this small feature?. Small as it is, I got to refresh my knowledge of the event.stopPropagation() method. MDN - The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

USE YOUR CODE FOR GOOD. -beau

Why did I want to solve it

During a project I was lucky to work on, I was tasked to create this small feature, a dynamic avatar because the users on this particular system didn’t usually update their profile picture, so I had to create one from the initials of their display names, (the female and male avatar placeholders are not fun anymore) hence this post.

Since I was using react js for the project, I wrote the original component in react js but I figured that since it’s relatively a few lines of code, I would write it in vanilla javascript for those that are anti-react plus if you can do it in vanilla, you definitely can do it in any js library or framework.

HTML: the structure

In the HTML file, I only created a div with an id of avatar and that's all.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Avatar</title>
</head>
<body>
    <!-- div for the avatar -->
    <div id="avatar"></div>
</body>
</html>

CSS: The style

I went with the minimal styling since most avatars are circular, I gave it a uniform width and height and then a 50% border-radius, then to make sure that the initials are always at the center, I gave it a display of flex then aligned its items to the center.

#avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: gray;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

JS: The behavior

And finally, with javascript, the big part is to get the first letter of each name in the string. For the first initial, all you have to do is get the character at index zero, then consider that the second name starts after the first space and get the character at index zero of the string after the space.

const avatar = document.getElementById('avatar')
const username = 'Charles Kasasira' // will be fetching the username, just used my to illustrate
const firstNameInitial = username[0]
const secondNameInitial = username.split(' ')[1].split('')[0]
avatar.innerHTML= firstNameInitial + secondNameInitial

And that's it, you can make it more fun with random colors for different users and add more CSS for fancy styling to make it better.

What did I learn from this small feature?.

Small as it is, this was my first approach to this problem and I got to learn that even a simple solution may be hard if you don’t think of breaking it down to the simplest parts. All I had to do here was create a circle, split a string, and display the index zero of the different chunks of the name. I hope you learned one or two things.

As beau says,

USE YOUR CODE FOR GOOD.

Definition from Oxford Languages

a graphical representation of a computer program in relation to its sequence of functions (as distinct from the data it processes).

A flow chart is made of symbols that are connected in a certain way to show how information and processes flow (go from one place to another in a steady stream). So why would a programmer use a flow chart or better yet, why would anyone layout a process(algorithm) in a graphical way? Well, like all established modes of organizing information, a flow chart pinpoints the implementation of the algorithm, what happens in each case of the data flow. Flow charts help programmers or coders visualization the program or the idea, way before committing efforts of writing several lines of code.

One might even go ahead to say that these inter-linked shapes promote efficient code.

"Do professional programmers use Flow Charts or pseudo code?" from quora.

There is no doubt pseudo-code is vital in the development process and I don't think drawing flow charts is a substitute for pseudocode, but a flow chart comes with its benefits, a simple one being in the documentation of the program for non-programmers. though on quora most of the comments are against them, one goes ahead to say that they are obsolete but I guess this is a personal judgment.

With that said there are different ways to create a Flow chart. You could simply draw a flow chart with a piece of paper, or if you could afford a whiteboard and markers. But today, there are a lot of tools out there that make the creation of flow charts easier with some offering templates to build from. I use Figma for my flowcharts.

The Common Flow Chart Symbols.

1. terminator
2. input/output block
3. process block
4. decision block
5. Flow arrow
6. Documents

Thanks for reading.

structure of a URL

protocol://[hostname]path[?query][#fragment]

While

URI(Uniform Resource Identifier) is a way to identify a resource. Unlike the URL, the Uniform Resource Identifier doesn't necessarily provide the means to locate the resource

To summarize it, the URL is a subset of a URI, ( that is to say, URL is a URI with a way to access that resource), another example of a URI is an ISBN. ( The International Standard Book Number is a numeric commercial book identifier that is intended to be unique. )

There is not much here. just came across the jsconfig.json file and was promised that it will blow my mind( actually, come to think of it, most things claim to blow minds in one way or the other).

Oh ya, straight to the point, when you put the jsconfig.json file at the root of your project, (That’s beside the package.json file, you knew, sorry about that). Then you can use the absolute paths instead of the ‘../../components’.

Project folder structure

contents of the jsconfig.json file

how to import files.

That’s it for this short and and and, well bye.

On the second day of reactjs, I share one of the most important concepts of react, components. A component is like a javascript function that has a specific functionality.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

There are two types of components, class and functional-based components

Class components

Class components are defined using the ES6 class. This was the only way of creating components before function components. But for now, I will be focused on the Functional based components which are easier and better with the use of hooks.

Functional based components

Functional components were introduced in React v16.8. They can take in props (properties) just like parameters in javascript and may return HTML (using JSX) telling the browser how the UI should look like.

When writing a component name, It's best to use a title case.

function ComponentName(){  
 return <h1>Hello, world</h1>  
}

The above component is similar to this class component

import React from 'react'

class ComponentName extends React.component{  
   render(){  
      return <h1>Hello, world</h1>  
   }  
}

A React project usually contains many components which can interact with each other. To make a component accessible by another, you will need to expose it and later on import it.

//ComponentOne.js

function ComponentOne(){  
    return <h1>Hello, world</h1>  
}

export default ComponentOne;

ComponentTwo.js

import ComponentOne from './ComponentOne'

function ComponentTwo(){  
     return (  
          <ComponentOne />  
     )  
}

export default ComponentTwo;

Conclusion
One of the pros of React is the reusability of components. I did mention props but more of that and state in another part of the 7days.

Happy coding.

Photo by Lautaro Andreani on Unsplash

Disclaimer: In no way, am I saying that I learnt all aspects of React in a week. This gave me the ability to think in React (declarative, components, props and state). Plus my prerequisite was a good grasp of Javascript.

DAY ONE

1. Installing React.
2. React App structure.

A declarative style like react, allows you to control flow and state in your application by saying “It should look like this” as opposed to an imperative style which allows you to control your application by saying “This is what you should do”.

Installing React

To use react you need to install node.js, if you don’t already have node install visit https://nodejs.org/en/download/ and select a version depending on your the operating system.

node.js comes with npm or in this case, npx (node package execute) which we can use to create a react app.
To check which version of node you have installed

node -v

To create a react app (my-react-app) with npx

npx create-react-app my-react-app

React App Structure

It’s most said that react is all about components.
“ Components refer to small independent parts of your app of specific functionality and UI that can be re-used throughout your app. For example, Button, Header and Footer Components.” but more about components on day 2.

React folder structure

The public folder contains static files like index. html, images, and other assets. which don’t need to be processed by the webpack.

the src folder, which initially contains the App.js file which you can edit the app.

index.js, the main/ entry file which allows you to import the parent file (App.js) as a module.

package.json, which holds a list of dependencies for your project plus some metadata like name, version etc.

Conclusion

Day one was a general introduction to the library and nothing complicated. You could check out day two, where I share about components, class vs functional components.
Thanks for reading.

Why SemVer?

• You can keep track of every transition in the software development phase.
• Versioning can do the job of explaining to the developers what type of changes have taken place and the possible updates that should take place in the software.
• It helps to keep things clean and meaningful.
• It helps other people who might be using your project as a dependency.

Each of these parts is managed as a number and incremented according to the following rules:

• PATCH is incremented for bug fixes or other changes that do not change the behaviour of the API.
• MINOR is incremented for backward-compatible changes of the API, meaning that existing consumers can safely ignore such a version change.
• MAJOR is incremented for breaking changes, i.e. for changes that are not within the backwards compatibility scope. Existing consumers have to adapt to the new API, very likely by adapting their code.

More should know

~(tilde): will update you to all future patch versions, without incrementing the minor version. ~1.2.3 will use releases from 1.2.3 to <1.3.0.

^(caret): will update you to all future minor/patch versions, without incrementing the major version. ^2.3.4 will use releases from 2.3.4 to < 3.0.0

The first version starts at 0.1.0 and not at 0.0.1, as no bug fixes have taken place, rather we start with a set of features as the first draft of the project.

It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website. The package manager and the registry are managed by npm, Inc.

To check which version of the package manager is installed on your computer use npm -v

npm manages downloads of dependencies of your project.

Installing all dependencies

If a project has a package.json file, by running npm install it will install everything the project needs, in the node_modules folder, creating it if it's not existing already.

Installing a single package

You can also install a specific package. Furthermore, since npm 5, this command adds <package-name> to the package.json file dependencies.

npm install

Updating packages

npm update

npm will check all packages for a newer version that satisfies your versioning constraints.

You can specify a single package to update as well:

npm update

Running Tasks

The package.json file supports a format for specifying command line tasks that can be run by using

npm run

my time at Ablestate

What is Ablestate

Ablestate Creatives Limited is a software company with the aim of “Making technology education fun, accessible & short term”. Ablesolver is one of the courses offered, this course helps you to become a World-Class Web Developer. I joined as a student in late March this year(2021) with a couple of colleagues.

In the past few months at Ablestate, I have gained alot of skills, I have been able to learn the different tools used in the industry.

Soft skills

Documenting: (Do not solve the same problem twice). Since day one we were encouraged to document our learning, work and processes. Documentation encourages knowledge sharing. We shared stuff we had learnt on our social media platforms daily for accountability purposes and also to share with the tech community the knowledge we had gained. Here are the words of our own Coach David Wampamba about self marketing and documenting.

A tweet from coach David

Hard skills

Touch typing: when I joined Ablestate, touch typing wasn’t know to me and to type without having to look at your keyboard seemed like a skill that would require ages of practice. but since day one, We have learnt how to type and in a period of 3 months, I was able to type at a speed of 38wpm and still going faster.

Git and GitHub: Git is a version control system and GitHub is a cloud-based hosting service that lets you manage Git repositories. This was part of the package we learnt in the first few weeks and we we able to use Github’s page feature to host our GitHub pages, charleskasasira.github.io

We have been able to look at many other technical skills Agile development, UI/UX design, Html, CSS, Bootstrap, SQL, Javascript , test-driven development using the Jest library, and currently we are learning Node.js as we are on the journey to become full-stack developers. With weekly assessments to help us grasp the knowledge, and other self reading assessments like SOLID principles, Data structure and algorithms and many more.

And we have been able to use the industry standard tools, we use Figma which is used to make wireframes and mockups. I was able to design my portiofolio from low fidelity wireframes and see it through the development, check it out here.

Github, mysql, trello, codesandbox, the terminal.

Challenges

During the cohort, Uganda faced the second wave of covid-19 and under government measures to fight the virus, we had a lockdown, Though this didn’t stop the team at Ablestate. We conducted online sessions using zoom which are still ongoing.

Ablestate Zoom session

Conclusion

So far (at the time of writing this article) we have covered almost 75% of the Ablesolver Cohort at Ablestate and with the knowledge gained and I am positive that I will be able to design and develop experiences that will make people’s lives simple. Thanks to the team at Ablestate.

The most basic and most used method is console.log(), which prints the string you pass to it to the console.

We can also format pretty phrases by passing variables and a format specifier.

• %s format a variable as a string
• %d format a variable as a number
• %i format a variable as its integer part only
• %o format a variable as an object

console.clear() clears the console (the behavior might depend on the console used)

console.count() counts the number of times a string is printed, and prints the count next to it:

The console.countReset()method resets counter used with console.count().

Print the stack trace

There might be cases where it’s useful to print the call stack trace of a function, maybe to answer the question how did you reach that part of the code?

You can do so using console.trace():

Calculate the time spent

You can easily calculate how much time a function takes to run, using time() and timeEnd()

The simplest way to go about coloring the console output is by using a library. Chalk is such a library, and in addition to coloring it also helps with other styling facilities, like making text bold, italic or underlined.

You install it with npm install chalk

Create a progress bar

Progress is an awesome package to create a progress bar in the console. Install it using npm install progress

This snippet creates a 10-step progress bar, and every 100ms one step is completed.

• Read -It reads the user’s input and parses it into JavaScript data structure and stores it into memory.
• Evaluate -it evaluates the JavaScript data structure.
• Print -It prints the result of the evaluated data structure.
• Loop -Loops the command until the user exits.

To enter the RELP terminal, you use the node command.

As the console is just like the browser’s console, you can test anything on it. e.g, if you write 1+ 2 it will display the addition of 1 and 2 i.e. 3 in the new line

Exploring JavaScript objects

Enter the name of a JavaScript class, like Number, add a dot and press tab.The REPL will print all the properties and methods you can access on that class

You can inspect the globals you have access to by typing global. and pressing tab

The _ special variable

If after some code you type _, that is going to print the result of the last operation.

Dot commands

The REPL has some special commands, all starting with a dot .

• .help: shows the dot commands help
• .editor: enables editor mode, to write multi-line code. Once you are in this mode, enter Ctrl+D to run the code you wrote.

• .break: when inputting a multi-line expression, entering the .break command will abort further input. Same as pressing Ctrl+C.
• .clear: resets the REPL context to an empty object and clears any multi-line expression currently being input.
• .load: loads a JavaScript file, relative to the current working directory
• .save: saves all you entered in the REPL session to a file (specify the filename)

• .exit: exits the REPL or you can press Ctrl+C twice

I remember when I made, well my first open source contribution to first-contributions and thought I could share the outlined basic steps for contributing as a beginner.

making your first Open-Source contribution

Why contribute to open source?

Contributing to open source projects comes with it benefits

• You get to practice with Git and GitHub for version control.
• This as other contributions to any community builds a sense of belonging
• Contributing improves your portfolio, as it shows you can collaborate well with others.

The 10 steps

1. Open a GitHub account if you don’t have one, if you do sign in
2. Fork a project you want to contribute to
3. Clone your fork

git clone https://github.com/your-username/first-contributions.git

4. Navigate to the local repository

cd path/to/local_repository

5. Create a new branch

git checkout - b branch_name

6. Make changes in your local repository

7. Add and Commit your changes

git add . // this adds all the changes made to the stage

git add filename // an

git commit -m "message goes here"

8. Push your changes to your fork

git push origin branch_name

9. Create a pull request

10. Review your pull request

Your changes will be reviewed and merged to the main if approved. This is a brief of the process and though it is for beginners, it might not be that friendly to those that have not use git or github before.