Bitwise operators Part 1

How many times last year did you use it? How many times did you hear this statement: “It’s not practical, no one uses it!”? How many times did you write complex “if and elses” to solve simple problems?

Think about the relationship between these questions! What if I tell you that the “not practical” thing will solve your problem and turn your complex and, many times, ugly code, in a simple and elegant one?

Let me introduce you to an old friend: the bitwise operators!

According to the MPN website:

Bitwise operators treat their operands as a sequence of 32 bits (zeroes and ones), rather than as decimal, hexadecimal, or octal numbers. For example, the decimal number nine has a binary representation of 1001. Bitwise operators perform their operations on such binary representations, but they return standard JavaScript numerical values.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators

Said that, it’s time for a great, yet simple, example that, I hope, it’ll open your mind to bitwise operators!

The problem

Your application must deal with some statuses of a thing, for example, a document status, or membership permission, and, the user can perform some actions under one or more conditions.

What I propose is: create and store the statuses and write the method which will authorise or deny the action based on the state of the thing.

To do this, I’ll use Javascript to keep it simple and to be on par with the modern web/app development. We’ll create a simple UI to run and test our hypothesis!

Creating the project

I’ll use the Visual Studio Code as the text editor and, if it is also your choice, I’ll also use the Live Server Extension from Ritwick Dey.

To make the UI code easier, I’ll use Bootstrap.

The folder and the git

There are several ways to do this, and I’ll do it the more accessible and visual way to do it!

Using the Windows Explorer, create a folder and open it.

Right click and choose: ‘Open with Code‘! Easy!

Right click and… Open with Code!

This is what you’ll see:

Welcome to Code

Now, open the integrated terminal using the CTRL + ` (control + backtick) command and execute the command:

git init

In time, if you don’t have the git installed on youre machine, you can download it from here: https://git-scm.com/downloads.

This command will initialise the git repository on your machine and, if you want to share your creation, it’ll be easier to push to a GitHub repository!

The git init command

Apparently, nothing happened but, if you open the folder (pro tip: on Windows, Shift + Alt + R to open the Windows Explorer and see the folder), you’ll see a hidden folder named ‘.git’. This is the indication your git is initialised.

The git is initialised

Creating the first files and testing the ‘Live Server’

The goal in this section is to test the live server and check how we’ll code and test when coding our POC (Proof of Concept).

Creating a file is pretty easy! Type Ctrl + N, and then, Ctrl + S. A ‘Save as’ window will pop up, and you should check:

  1. You’re saving in the right folder, and;
  2. Name it as ‘index.html’.
Saving the first file

Now, you have an empty HTML file, and you’ll want start to code! To do this, we’ll use a feature which is natively enabled on VS Code: Emmet!

According its website,

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

https://docs.emmet.io

Using Emmet, is pretty easy to scaffold an HTML page, simply type ! + tab to automatically do it.

Emmet in action!

Press tab to cycle through the possibilities and, on the title, write a meaningful one.

Scaffolding result

Now, it’s time to check the Live Server and realise how it’ll speed our code! To do this, follow these 2 simple steps:

  1. Right click on the HTML page;
  2. Click on Open with Live Server.
Starting the Live Server

It’ll open your default browser and open your HTML page. Put it side-by-side with your text editor to see it in action.

Note the red arrow; it points to the Live Server disable button. Clicking on it will stop the Live Server, and you won’t be able to run your page.

Live Server in action

But how the Live Server can help us? It merely reloads your webpage every time you save the HTML or Javascript page! To test it, open the console on the browser, write something on the HTML and save. The page will reflect what you did.

Live Server reloading the page

Now, it’s time to test the Javascript! The process, as you already did it with the HTML, is straightforward:

  1. Ctrl + N to create a new file;
  2. Ctrl + S to save a file naming as index.js;
  3. Code something as, console.log(‘Hey’);
  4. On the index.html, put a reference to the index.js file;
  5. Save!
Testing the JS file

You’ll see at the console your log (please see the nbr. 1)!

Here, I must tell you something about the second line on the console. It is related to the Web Activities Extension from Microsoft.

I use it to make my Chrome usage available on Windows 10 Task View, so, you’ll notice I’ll filter the console logs writing the JS file name in the filter. You don’t need to do this! I’ll do to clean the clutter and only show the important things.

Filtering the JS logs

Now our POC base is ready! It’s an excellent time to commit and save the ‘base’!

Stay tuned to follow this POC and Happy Coding!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s