Forem: Blue Turtle

With Firefox69 Privacy Is the Default

Islam Sayed — Sun, 08 Sep 2019 10:23:41 +0000

Privacy is not an option in Firefox69 browser version. It is default by default. With the new release of the browser, these are the new features it prsents for its users:

Block Third-Party Tracking Cookies (by default).
Block Cryptominers (by default).
Block Fingerprinting (on strict mode - you have to enable it,and I'm going to show you how).
Block autoplay video's audio (by default).

Block Third-Party Tracking Cookies

As mentioned in mozilla blog post, the new feature works behind-the-scenes to keep a company from forming a profile of you based on their tracking of your browsing behavior across websites — often without your knowledge or consent. Those profiles and the information they contain may then be sold and used for purposes you never knew or intended.

Here is how to see the blocked list for a website:

Click on info icon beside address bar.

Click on Cookies.

Block Cryptominers

Cryptominers access your CPU without your knowledge, make excessive computational operations and this leads to slowing down your machine, and drain your batteries. Allof these for creating cryptocurrency not for you but for them. Firefox blocks them by default.

Block Fingerprinting

Fingerprinting scripts have the ability to take a snapshot of your machine's configuration when you visit a website. This snapshot can then be used to track you accross the web. Firefox blocks fingerprinting by enabling strict mode.

To turn on strict mode, you will have to go to options, then chose Privacy & Security, and check Strict.

How to enable strict mode

Block autoplay video's audio

You have three options with videos in Firefox:

Allow audio and video autoplay.
Block audio only(default).
Block audio and video until you press the play button.

You can alter the setting easily by going to Privacy & Security, then at Permissions locate the Autoplay settings.

As you see the new Firefox treats user privacy as a first priority and this is really a win to this browser, and its users.

Now Use Material-UI Icons With Super Ease

Islam Sayed — Wed, 28 Aug 2019 12:27:56 +0000

Instead of searching for icons in Material icons, and then trying to figure out what the required icon component name would look like, now you can directly search for any icon among 1,000+ official Material icons converted to svg icon components.

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

The search feature is super easy. After you select an icon a pop up opens with the import of such icon.

You can also choose between icon styles (Filled, Outlined, Rounded, Two tone, and Sharp) in the left side bar.

As announced in Material-UI tweet that their synonyms list is not perfect yet. And they will refine it based on the search usage.

Modular Front-end development

Islam Sayed — Mon, 01 Apr 2019 06:54:01 +0000

🎙 I am making a research for an article about modular approach in Front-end development 💻. I'd be thankful if anyone could help me with good resources. 💚

Why Do We Write ?

Islam Sayed — Mon, 11 Mar 2019 22:12:47 +0000

Yes, this is for the absolute beginner, and also for those non-beginners who forgot. I am going to look back behinds and re-discover things we take as granted by asking "WHAT", "WHY", and "HOW".

Why do we write <! DOCTYPE html> ?

<!DOCTYPE html>
<html lang="en">
    <head>

    </head>
    <body>

    </body>
</html>

<! DOCTYPE html> is the first html tag written at the beginning of any html file. It is not an element and doesn't has content or closing tag.
Its job is to tell the browser that the document being rendered is an HTML document. That's the reason for its position to be the first thing the browser read.

But what would happen if we didn't write it?

If browser didn't find a DOCTYPE declaration, it would enter quirks mode🤔 which is a technique used by browsers to try to support old web pages that has been made for Navigator 4 and Internet Explorer 5. Read about it here.
This means that your website will have different behavior and look with different browsers especially if it has new HTML elements and features.

1. let, const and ... var

Islam Sayed — Mon, 11 Feb 2019 13:58:45 +0000

ES6 has introduced some new syntax features. One of them was key words const, and let to declare variables. Let's talk about why they are preferred over var.

Scope🔭

var has a function scope. This means it is accessible anywhere in the function it is defined inside. See this example:

function buyHerChocolate(onDiet) {
    if (onDiet) {
        var decision = "Don't do it!";
    } else {
        var decision = "Go buy it!"
    }
    console.log(decision);
    }
buyHerChocolate(true);//"Don't do it!"
console.log(decision);//Uncaught ReferenceError: decision is not defined

As you see decision variable defined with var was availabe inside the function scope, but when we tried to log it outside the function the console throws an error decision is not defined as if it's never existed.

On the contrary, let and const have block {} scope.

function buyHerChocolate(onDiet) {
    if (onDiet) {
        let decision = "Don't do it!";
        console.log(decision);
    } else {
        let decision = "Go buy it!"
        console.log(decision);
    }
    console.log(decision);
    }
buyHerChocolate(true);
//"Don't do it!"
//Uncaught ReferenceError: decision is not defined
console.log(decision);//Uncaught ReferenceError: decision is not defined

Surprise! Logging the value of decision inside the expression block resulted in the predicted string while doing the same out of the block throw error and out of the function scope also throws an error.

The same happens with const.

Hoisting⏫

Variables declared with var are hoisted to the top of their scope. It is important to notice that the variable declaration is what is being hosted not the assignment.

console.log(x);
var x = 5;//undefined

What happened?! The console.log() function will not get executed until hoisting any var variable. Therefore, var x; will go up to the top of the global scope. Then console.log(x) is executed and logs undefined, because x has no value at that time. The x is assigned the value 5. It will look like this:

var x;
console.log(x);
x = 5;

Because of that if we console.log(x) after that it would log 5 to the console.
This quirky behavior can introduce bugs in larger programs.

let and const are not hoisted.

console.log(x);
const x = 5;//Uncaught ReferenceError: x is not defined

Declaration & Assignment✒️

var variables can be re-declared and reassigned different value multiple times in the same scope.
let variables can not be re-declared but can be reassigned in the same scope.
const variables can not be re-declared or reassigned in the same scope. In addition to that they must be declared and assigned a value at the same time. So we can not do that:

const y;//Uncaught SyntaxError: Missing initializer in const declaration

But we must do that:

const y = 5;

So if your variable would have changed values, declare it using let, if not always use const.

These differences between them and var will prevent naming conflictions.

Conclusion:

For the mentioned reasons you should use const in all cases except when the variable would be reassigned new values. At such cases use let instead. Most of articles recommend developers to avoid using var. Why would anyone use var anymore?!

Do you agree with me about that? Please, leave a comment telling me your opinion.

For further readings:

📌The Difference Between Function and Block Scope in JavaScript

📌Demystifying JavaScript Variable Scope Hoisting

📌What is Hoisting in JavaScript?