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:
Said that, it’s time for a great, yet simple, example that, I hope, it’ll open your mind to bitwise operators!
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.
Creating the project
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!
This is what you’ll see:
Now, open the integrated terminal using the CTRL + ` (control + backtick) command and execute the command:
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!
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.
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:
- You’re saving in the right folder, and;
- Name it as ‘index.html’.
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.
Press tab to cycle through the possibilities and, on the title, write a meaningful one.
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:
- Right click on the HTML page;
- Click on Open with 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.
- Ctrl + N to create a new file;
- Ctrl + S to save a file naming as index.js;
- Code something as, console.log(‘Hey’);
- On the index.html, put a reference to the index.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.
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!