Forem: Shounak Das

Understanding Closures in JavaScript

Shounak Das — Fri, 17 Sep 2021 09:22:36 +0000

The callbacks, event handlers, higher-order functions can access outer scope variables thanks to closures. They are important in functional programming and are often asked in coding interviews.

Closures are difficult to grasp at the beginning. If you haven't reached the "Aha!" moment in understanding closures, I hope this article will benefit you.

Scope

In order to understand closures, you must have a very good understanding of scopes.

The scope is the context in which values and expressions are visible or can be referenced.

There are 3 types of variable scopes:

Global scope
Local scope
Block scope (introduced in ES6)

Global Variables

Any variable that is declared outside a function has a global scope.

A global variable can be accessed by all functions and scripts in a document.

var fruit = "mango";
// fruit can be accessed here

function myFunc() {
    // fruit can be accessed here as well
    alert(fruit);
}

Also, any variable that is initialized or has been assigned a value inside a function without being declared first will be global.

myFunc(); // call the function first

document.getElementByID("fruit").innerHTML = "My favorite fruit is " + fruit;
// fruit can be accessed here

function myFunc() {
    fruit = "mangoes";
    alert(fruit);
    // fruit can be used here too
}

Local Variables

Any variable that is declared inside a function has a local scope.

A local variable can be only accessed by the function where it was declared.

// fruit can NOT be used here
document.getElementByID("fruit").innerHTML = "My favorite fruit is " + fruit;

function myFunc() {
    var fruit = "mangoes";
    alert(fruit);
    // fruit can be used here
}

Note:- Changes made to a variable in the global scope takes effect inside the local scope as well

However, changes made inside the local scope don't affect the global scope.

Similar to the local scope is the Block scope.

A block is any part of the code enclosed within { and }.

Variables declared using the let keyword are accessible within the block in which it is declared.

Note:- Variables declared with the var keyword can NOT have block scope.

Scope Nesting

Let’s play a bit more with scopes, and nest one scope into another. For example, the function innerFunc() is nested inside an outer function outerFunc().

function outerFunc() {
    // Outer scope
    let outerVar = "I'm outside";

    function innerFunc() {
        // Inner scope
        console.log(outerVar);
    }

    innerFunc();
}

Can you access the variable outerVar of outerFunc() from within innerFunc() scope?

Indeed. Try it yourself and find out.

Now you know two interesting things:

Scopes can be nested.
The variables of the outer scope are accessible inside the inner scope.

The Lexical Scope

How does JavaScript understand that outerVar inside innerFunc() corresponds to the variable outerVar of outerFunc()?

JavaScript implements a scoping mechanism named lexical scoping (or static scoping).

Lexical scoping means that the accessibility of variables is determined by the position of the variables inside the nested scopes.

It’s called lexical (or static) because the engine determines the nesting of scopes at the lexing (aka tokenizing) time just by looking at the JavaScript source code, without executing it.

The Closure

Let’s make a change: innerFunc() to be invoked outside of its lexical scope (outside of outerFunc()).

Would innerFunc() still be able to access outerVar? Let's see.

function outerFunc() {
    let outerVar = "I'm outside";

    function innerFunc() {
        console.log(outerVar); // logs "I'm outside"
    }

    return innerFunc();
}

const myInnerFunc = outerFunc();
myInnerFunc();

innerFunc() still has access to outerVar from its lexical scope, even after being executed outside of its lexical scope.

In other words, innerFunc() remembers the variable outerVar from its lexical scope.

So, innerFunc() is a closure because it closes over the variable outerVar from its lexical scope.

The closure is a function that has access to its lexical scope when executed outside of its lexical scope.

A rule of thumb to identify a closure:

If inside a function you see a variable not defined inside that function, most likely that function is a closure because that particular variable is captured.

Thanks for reading 🙏

CSS Display inline, block, and inline-block

Shounak Das — Mon, 19 Jul 2021 17:44:49 +0000

In this post, we will discuss the difference between three common CSS display properties:

inline
block
inline-block

1. `inline`

Inline elements do not start from a new line. You can not set width or height values for them. Even if you set a value, it won't have any effect.

Examples:

<span>
<a>
<img>
<u>
<e>
<strong>

2. `block`

Block elements always start from a new line. They take up the whole space available to them. You can set their width and height.

Examples:

<div>
<header>
<footer>
<section>
<main>
<aside>
<h1>
<p>

3. `inline-block`

These elements are formatted just like inline, but you can set their width and height, similar to block.

Examples:

<button>
<select>

Hope this helped 😊

15 Great Websites to Learn Front-end Development

Shounak Das — Mon, 18 Jan 2021 15:29:46 +0000

I have created this amazing list of web resources which will help you become a front-end developer in 2021.

1. developer.mozilla.org

For front-end ( HTML, CSS & JavaScript ) reference and learning.

2. w3schools.com and w3resource.com

For HTML, CSS, JavaScript reference and learning.

3. htmlreference.io and cssreference.io

For HTML and CSS visual guide & reference from the creator of Bulma.

4. javascript.info

Amazing resource to learning JavaScript.

5. css-tricks.com

Learn everything about CSS (they've got some seriously awesome tricks).

6. freecodecamp.org

A free bootcamp for web developers (absolutely worth it!).

8. codepen.io

The best place to build, test, and discover front end code.

9. repl.it

Learn, build, collaboration and host your code in one place.

10. caniuse.com

Check cross browser compatibility of front-end tools.

11. javascript30.com

Build 30 small projects with JS in 30 days.

12. 30secondsofcode.org

Short code snippets for all your front-end developer needs.

14. goalkicker.com

Free notes related to front-end technologies.

15. roadmap.sh

Step by step guides and paths to learn different tools or technologies.

And of course, don't forget about DEV... 👨‍💻

How to Create Striped Backgrounds with CSS

Shounak Das — Wed, 30 Dec 2020 16:57:25 +0000

Stripes look cool in the background and are very easy to create using repeating gradients. CSS has the properties repeating-linear-gradient and repeating-radial-gradient which we can use to create stripes. These two properties are widely supported in all browsers - Firefox 10+, Chrome 26+, Safari 6.1+, IE 10, 11 and Opera 11.6+ (use prefixes for ancient browsers). That means, you can spice up your next project with gradient stripes without worrying about browser support.

Syntax

 background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

These examples should help you understand better.

Horizontal Stripes

Working
There's no magic happening here. It is exactly the same as normal linear or radial gradients. Here, think of each stripe as a separate container which has a gradient background having same color at both ends. The first two color-stops act as the endpoints of the first container's gradient. The above code reads: From the top, start with dark blue from 0px and end with dark blue at 20px. Then start with light blue from 20px and end with light blue at 40px. Repeat the steps.

Vertical Stripes

Just change the direction towards right or left to create vertical stripes.

Diagonal Stripes

Use any angle to create diagonal stripes.

Radial Stripes

Use repeating-radial-gradient to create radial stripes.

Why stop at only two colors when CSS doesn't get angry with more.

I hope you learnt something new from this quick tutorial and this motivated you to keep creating beautiful things with CSS.

Happy Coding!😎

Test your Internet Speed through the Command Line

Shounak Das — Wed, 23 Dec 2020 04:25:15 +0000

In this quick post, I will be sharing a simple trick to test your internet speed through the command line. I know you can test your internet speed through a web browser, but there might be a few reasons for which you would prefer the command line tool instead. Maybe you’re remotely connected to a server via ssh, and want to test speeds on that machine. Maybe you’re already used to using commands to troubleshoot your network, and want to add a speedtest to your toolkit. Or, maybe you just think the command line is cool.

Whatever be the reason, testing your internet speed through the command line is much faster and easier. All you need to do is to install a package called speedtest-cli.

Installing speedtest-cli on Linux

On Ubuntu(or any other Debian based distro), run:

sudo apt install speedtest-cli

For other Linux distros, you must change the apt with the respective package managers:

dnf for Fedora
pacman for Arch
yum for CentOS
zypper for openSUSE

Installing speedtest-cli on Windows

Installing speedtest-cli on Windows is slightly more complicated. This is because first, you need to download and install Python. Then you need to ensure that both python and pip are added to the system PATH. But if you already have them installed, no worries! Just open the command prompt and run:

pip install speedtest-cli

Installing speedtest-cli on macOS

The simplest way to install speedtest-cli on a Mac is using Homebrew , the open-source package manager for Mac. Check out this guide to installing Homebrew if you don’t have it set up (if you use the command line a lot, you should absolutely install Homebrew).

Once Homebrew is set up, you can install speedtest-cli with a simple command:

brew install speedtest_cli

Note the underscore in the package name. For some reason, the name is different in Homebrew than the Linux package manager.

Running speedtest-cli

Testing your internet speed using the command line is the same on all platforms. All you need to do is to type speedtest and hit the Enter key.

I hope you found this post helpful.
Thanks for reading.🙏

Create a Simple Text Editor with Python

Shounak Das — Tue, 22 Dec 2020 18:08:11 +0000

In this post, I will show you a very easy way to create a simple text editor with Python. This tutorial is meant for absolute beginners. If you know the fundamentals of Python and a little bit of file handling, you can make one yourself. Before I begin, I would be explaining a bit of file handling for those who don't know anything about it.

File Handling

File handling is basically working with files using a programming language. You can open a file, read, write, delete data, and close it again, making permanent changes. Apart from these, there are many more operations, but we don't need to learn all those for this project. I will leave a link to a reference at the end of this post. You can visit it to learn more.

Opening and Closing a file

To open a file, we use the open() function. The open() function takes two parameters - file path, and mode.

There are four modes to open a file:

"r" - Read - Default value. Opens a file for reading. Produces an error if the file doesn't exist.
"a" - Append - Opens a file for appending, creates the file if it does not exist.
"w" - Write - Opens a file for writing, creates the file if it does not exist.
"x" - Create - Creates the specified file, returns an error if the file exists

In addition, you can specify if the file should be handled as binary or text mode.

"t" - Text - Default value. Text mode.
"b" - Binary - Binary mode (e.g. images).

Example:-

file = open("path/to/file.txt", "rb")

Here, the mode "rb" tells python to "read the file in binary mode."

After you open a file and work on it, you need to close it. Python has the close() function that closes a file.

file = open("file.txt", "w")    # Opens a file in write mode
file.close()    # Closes the file

Reading a File

The read() function allows us to read the contents of a file. It takes an optional argument (an integer) that specifies how many characters to read.

f = open("file.txt", "r")

# Read all content and print
print(f.read()) 

# Read only 12 characters and print
print(f.read(12))

Writing to files

Two modes allow us to write to files:

"a" - Append - will append to the end of the file
"w" - Write - will overwrite any existing content

f = open("file.txt", "a")
f.write("Now the file has more content!")
f.close()

f = open("file.txt", "w")
f.write("Whoops! I have deleted the content!")
f.close()

That's enough file handling for now. Let's move on to the main part.

First, create a new python file. We will be using the path module from os. So, let's import it.

from os import path

This will help us to check existing files. Now, we need the user to enter the path to the new or existing file. Let's store it in a variable file_path.

file_path = input("\nCreate file (please enter the path to file): ")

Next, we need to check if the file already exists using the exists() function of the path module. For this, we need to write an if statement. The exists() function checks if the file already exists at the given path, in this case, file_path.

if path.exists(file_path):
    print("\n\tFile already exists!")
    ans = input("\nDo you want to use this file? (y/n)\n-> ")

else:
    print("\n\tCreating new file...\n")
    file = open(file_path, "a")

If the file does not exist, then it will create a new file at the same location. Otherwise, it will ask if we wish to continue with the existing file. So, we need another if statement.

if ans == 'y' or ans == 'Y':
    file = open(file_path, "a")
    ans = input("\nDo you want to erase all content? (y/n)\n-> ")

else:
    exit()

If we wish to continue with the existing file, it will ask if we wish to delete the content, or do we want to append text to it. Otherwise, the program will stop. So, let's write another if statement inside this one.

if ans == 'y' or ans == 'Y':
    print("\n\tErasing...\n")
    file.seek(0)
    file.truncate()

else:
    pass

The pass keyword tells the compiler to just do nothing and move on to the next steps. Putting all parts together, your code should look something like this:

from os import path

file_path = input("\nCreate file (please enter the path to file): ")

if path.exists(file_path):
    print("\n\tFile already exists!")
    ans = input("\nDo you want to use this file? (y/n)\n-> ")

    if ans == 'y' or ans == 'Y':
        file = open(file_path, "a")
        ans = input("\nDo you want to erase all content? (y/n)\n-> ")

        if ans == 'y' or ans == 'Y':
            print("\n\tErasing...\n")
            file.seek(0)
            file.truncate()

        else:
            pass

    else:
        exit()

else:
    print("\n\tCreating new file...\n")
    file = open(file_path, "a")

Now comes the most interesting part where we will build the interface. We need to inform the user how to use our text editor beforehand. So, paste this print statement.

print("\nPress RETURN to start a new line.\nPress Ctrl + C to save and close.\n\n")

And now, paste these lines:

line_count = 1

while line_count > 0:
    try:
        line = input("\t" + str(line_count) + " ")
        file.write(line)
        file.write('\n')
        line_count += 1

    except KeyboardInterrupt:
        print("\n\n\tClosing...")
        break

As you know, most text editors put a line number at the start of every line. Here, we will be doing something like that. I have used an infinite while loop so that you can add as many lines as you want to. But, we can't let it run forever. So, I have used a try/except statement, with the exception being raised by a KeyboardInterrupt, caused by pressing Ctrl + C.

If you don't know what the try/except statement is used for, in short words, it tries to run the code unless an exception (e.g. pressing a key, reaching the end of file, etc.) occurs.

Here, the line variable will store a single line of text, then it will write it to the file, add a new line, increment line_count by one, and again repeat unless you press Ctrl + C, which is used to stop a while loop (not to copy text).

Last but not the least, we need to close the file. Summing it up, your code will look like this:

from os import path

file_path = input("\nCreate file (please enter the path to file): ")

if path.exists(file_path):
    print("\n\tFile already exists!")
    ans = input("\nDo you want to use this file? (y/n)\n-> ")

    if ans == 'y' or ans == 'Y':
        file = open(file_path, "a")
        ans = input("\nDo you want to erase all content? (y/n)\n-> ")

        if ans == 'y' or ans == 'Y':
            print("\n\tErasing...\n")
            file.seek(0)
            file.truncate()

        else:
            pass

    else:
        exit()

else:
    print("\n\tCreating new file...\n")
    file = open(file_path, "a")

print("\nPress RETURN to start a new line.\nPress Ctrl + C to save and close.\n\n")

line_count = 1

while line_count > 0:
    try:
        line = input("\t" + str(line_count) + " ")
        file.write(line)
        file.write('\n')
        line_count += 1
    except KeyboardInterrupt:
        print("\n\n\tClosing...")
        break

file.close()

Output

Let's see the changes in the file abc.txt.

That's how our own text editor works and looks like. I hope today you learned something new and understand how you can apply your programming skills to create some cool projects. If you have any questions, just leave a comment and I will be happy to help you.

Happy Coding!😎

Resources

Python conditional statements 👉 visit
Python while loops 👉 visit
Python file handling 👉 visit
Python os module 👉 visit
Python try/except 👉 visit

How to Create an Overlay Effect with CSS

Shounak Das — Mon, 21 Dec 2020 15:18:31 +0000

CSS doesn't provide a straightforward way to add an overlay effect. But, we can create one easily with only two main properties, namely, z-index and opacity. In this quick post, I will showing you how to create one.

What we need to do is just move the overlay div above your text or image, and then make it partially transparent so that the content behind is visible. First things first, I will add a overlay div and some text inside a wrapper. Like this:

<div class="overlay-box">
  <div class="overlay"></div>
  <h1>Text</h1>
</div>

Next, copy this CSS:

.overlay-box {
  position: relative;
  height: 200px;
  width: 400px;
}

.overlay {
  background: red;
  height: 100%;
  width: 100%;
  opacity: 0.7;  /* Must be translucent */
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: -1;  /* Your content must be under the overlay box */
}

After adding all this, you should get something like this:

I hope you were able to learn something new today and liked it. Do share your thoughts on this in the comments below.

Happy Coding!😎

The Beginner's guide to CSS Illustrations - Part 2

Shounak Das — Sat, 19 Dec 2020 11:18:56 +0000

Part 2 - Keeping things clean

Welcome back to the second and final part of this series. I hope you have mastered the art of drawing simple shapes with CSS. Have you tried creating some beautiful objects by combining the shapes? If yes, put the link to your CodePen or JSFiddle in the comments and share it with others. If you haven't, I would recommend you to first try drawing objects like clouds, a smiley, flowers, a simple car, ice cream, etc. Try to add as much detail as you can. Draw anything you like.

Pseudo-elements

One thing you will notice is that your html contains too many divs. This can make it look untidy. Also, with so many divs, at some point, you may face issues with positioning. To solve this problem and clean up the code, we have pseudo-elements, ::before and ::after. According to MDN,

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

If you have come across them somewhere, you might have noticed that, in many places, a single colon (:) is used instead two (::). As for now, you can use any rule. The two-colon syntax was introduced in CSS3 to distinguish between pseudo-elements and pseudo-classes (eg. :hover). Since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements. Now, let's see how it can clean our code.

Let us draw a nice smiley. To begin with, I will first create its face.

<div class="face"></div>

body {
  background: #FFECB3;
}

.face {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: #FFDB57;
}

Next, I will add the eyes. The divs defining the eyes must be inside the .face div, and, they should have an absolute positioning. I want the shape of the eyes to be elliptical. I guess you know how to draw an ellipse. So, now your HTML should look like this.

<div class="face">
  <div class="eye-grp">
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
</div>

I have given the class eye to both the eyes since they should be identical. We can just add the styles to the eye class. Otherwise, we would have to copy the styles of one eye to the other. So the CSS should be

body {
  background: #FFECB3;
}

.face {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: #FFDB57;
}

.eye {
  position: absolute;
  height: 40px;
  width: 30px;
  background: #191F45;
  border-radius: 50%;
  top: 70px;
}

.left {
  left: 60px;
}

.right {
  right: 60px;
}

Now we have to draw the mouth. So, a smiling mouth should be a semi-circle. I hope, by now, you can draw semi-circle easily. Make sure that the mouth div is a sibling of eye-grp.

<div class="mouth"></div>

.mouth {
  width: 120px;
  height: 60px;
  border-radius: 5px 5px 60px 60px;
  background: #191F45;
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
}

That's a cute smiley😀, isn't it? Let us add some more details. First, I will add the pupils. So, create a div having class pupil inside both left and right divs.

<div class="eye left">
  <div class="pupil"></div>
</div>
<div class="eye right">
  <div class="pupil"></div>
</div>

.pupil {
  height: 20px;
  width: 15px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 4px;
}

Now, I will add a tongue. The tongue should be another semi-circle, but flipped horizontally (with respect to the mouth). Before you create the tongue, few more rules should be added to mouth div.

.mouth {
  overflow: hidden
  border: 5px solid #191F45;
  box-sizing: border-box;
}

The overflowing parts of the tongue should be hidden, and I added the border to create a narrow gap between the tongue and the border of the mouth. Now add the tongue div inside mouth and then add the CSS rules.

<div class="mouth">
  <div class="tongue"></div>
</div>

.tongue {
  width: 100px;
  height: 50px;
  background: #EE6055;
  border-radius: 50px 50px 0 0;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

A little shadow on the face won't do any harm.

.face {
  box-shadow: inset -10px -10px 0 0 #ffcb05;
}

Even more beautiful!

Let us look at the html once.

<div class="face">
  <div class="eye-grp">
    <div class="eye left">
      <div class="pupil"></div>
    </div>
    <div class="eye right">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
</div>

Even though our smiley seems to be happy, our code does not. There are too many divs. Let us clean it up. So, I will now bring the pseudo-elements in the battlefield.

I will begin with removing the tongue div and replacing the CSS with .mouth::after.

<div class="face">
  <div class="eye-grp">
    <div class="eye left">
      <div class="pupil"></div>
    </div>
    <div class="eye right">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mouth"></div>
</div>

.mouth::after {
  content: "";  /* Important */
  width: 100px;
  height: 50px;
  background: #EE6055;
  border-radius: 50px 50px 0 0;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

Note: When using pseudo-elements, we must add the content property. Otherwise, it won't produce any effects. Whatever you put within the quotes will be shown on the screen. Since we don't want any text here, we can leave it blank.

Next, I will remove the pupil classes and replace them with eye::after in CSS.

<div class="face">
  <div class="eye-grp">
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
  <div class="mouth"></div>
</div>

.eye::after {
  content: "";
  height: 20px;
  width: 15px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 4px;
}

The HTML is much happier now, just like our smiley! I hope this post helped you understand how pseudo-elements are used in CSS and how we can use them to reduce unnecessary elements in HTML. Stay safe, keep coding, and never stop learning!😎

Play with my 😀 on codepen.

How to enable backdrop-filter in Firefox

Shounak Das — Thu, 17 Dec 2020 06:26:55 +0000

The CSS property backdrop-filter allows you apply graphical effects like blur and color filters to the background of your element. This property can help you create awesome effects in your webpage.

Author: Andy Adams

But, there is one problem. Its not supported in Internet Explorer and Firefox. The good news is you can enable it in Firefox. So, if you are a Firefox user, you can still test your webpages that use backdrop-filter. But, even if you enable it in your browser, most likely, it won't be enabled in your clients' browser. So, you should always design your pages so that it looks good with and without backdrop-filter enabled.

According to caniuse, backdrop-filter can be enabled in Firefox versions 70 and above. To enable this property, follow these steps:

Open a new Firefox tab and type about:config in the address bar. Press Enter.
You should see a warning. Click on the button saying Accept the Risk and Continue. This message is shown because on this page, all experimental features are present which may produce glitches when enabled and hinder performance, including the backdrop-filter.

Type layout.css.backdrop-filter.enabled in the search bar. You should see the value is set to false. On the extreme right, there is a reversible arrow (or whatever you call it). Click it to change the value to true.

Next, type gfx.webrender.all in the search bar. Its should also be false by default. Change it to true similarly.

Now you can close the tab and see backdrop-filter in action. Remember that it might produce glitches, so, don't panic, we can only wait for the developers to fix those glitches in the near future.

Happy Coding!😎

The Beginner's guide to CSS Illustrations - Part 1

Shounak Das — Wed, 16 Dec 2020 04:36:23 +0000

Part 1 - The Basics

Creating CSS illustrations can be interesting and fun. If you visit CodePen or any other similar website, you will find how incredible designs and artworks can be created with CSS. Let me show you an example.

Author: Shunya Koide

Cool. Isn't it? You can also add some animation and bring life to it. Trust me, once you start creating your own illustrations, you will get addicted to it. It also helps to skyrocket your CSS skills, especially, working with pseudo-elements, shadows, positioning and border-radius. Now, let's see how we can create our own illustrations.

In this post, I will show you how to create the most basic shapes. To creates shapes, we use divs along pseudo-elements ::before and ::after.

Square

The square is the simplest shape to draw with CSS. Just add a height and equal width, then, add a background-color, and your square is complete.

<div class="square"></div>

.square {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
}

Rectangle

Make the square longer on one side to get a rectangle.

<div class="rectangle">div>

.rectangle {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
}

Circle

Create a square, and add 50% border-radius on all sides to turn it to a nice circle.

<div class="circle"></div>

.circle {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}

Ellipse

Follow the same steps you did for drawing the circle, but on a rectangle.

<div class="ellipse"></div>

.ellipse {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
  border-radius: 50%;
}

Pill

Now, this shape is very common, especially for buttons. You can call it pill or a capsule shape. The trick to create this is to add a much larger border-radius on all sides.

<div class="pill"></div>

.pill {
  background-color: dodgerblue;
  height: 100px;
  width: 200px;
  border-radius: 50000px; /*Any large value will do the trick*/
}

Egg

To create this shape, you need to use different values for horizontal and vertical radius.

<div class="egg"></div>

.egg {
  height: 200px;
  width: 150px;
  background-color: dodgerblue;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Triangle

Triangles are a little different than other shapes as we draw them with borders. See the code below, height and width are set to zero. It might be a little difficult for you to understand how its forming. Tweak the code and see what happens when you change the values. Try setting a height and width other than zero. Change the border widths. Observe the changes, and you will understand how it works.

<div class="triangle"></div>

.triangle {
  height: 0px;
  width: 0px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 173px solid dodgerblue;
}

This pen by Chris Coyier will help you understand easily:

Trapezium

The trapezium is exactly same as the triangle, except it has a non-zero width.

<div class="trapezium"></div>

.trapezium {
  height: 0px;
  width: 150px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 150px solid dodgerblue;
}

Parallelogram

We use the transform: skew() property to create the parallelogram. You can also create the rhombus similarly by using equal height and width.

<div class="parallelogram"></div>

.parallelogram {
  height: 125px;
  width: 200px;
  background-color: dodgerblue;
  transform: skew(-20deg);
}

Making CSS art is just a matter of combining these shapes in interesting and fun ways. In the next post, I will show you how you can use pseudo-elements I talked about earlier to simplify complex illustrations and keep the html clean. Having said that, I hope you learned something new, and this motivated you to create something awesome and beautiful.

Happy Coding!😎

You can find code snippets for more shapes like the heart, stars, infinty, hexagon, octagon, etc. on my codepen🚀

Create a Glassmorphic Credit Card with CSS

Shounak Das — Tue, 15 Dec 2020 06:10:44 +0000

Glassmorphism seems to be the new trend of the coming year, and it has become very popular among designers and developers. The main characteristics of this new trend are:

Transparency (frosted-glass effect using background blur)
Vivid background colors
A thin, light border (like the edges of a glass)
A light shadow.

Since all these characteristics produce a glassy look, it is, thus, named glassmorphism.

If you don't know how to produce a background blur, here are the steps:

Your background-color must be transclucent. You can either use rgba() or the 8-digit hexadecimal code (the last two digits being the opacity in %).
For the blur, we need to use the CSS property backdrop-filter: blur(10px).

Note:- backdrop-filter is not supported on Firefox and IE. However, it can be enabled on Firefox (may produce some glitches).

In this post, I will be showing you an example of how you can create glassmorphic, pure CSS illustrations.

I have used two Google fonts - Nunito and Josefin Sans. You can use either these, or any other font of your choice. Here is the <link> for these two:



<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap" rel="stylesheet">

Just paste it in the <head> and you are ready to begin!

The Background

As I said, we should use bright colors for the background. I would be using a bright blue gradient.



body {
  background: linear-gradient(to left, #283593, #1976d2);
}

The Card

First, put this html:



<div class="card-group">
  <div class="card">
    <div class="logo"><img src="path/to/logo.png" alt="Visa"></div>
    <div class="chip"><img src="path/to/chip.png" alt="chip"></div>
    <div class="number">1234 5678 9012 3456</div>
    <div class="name">SHOUNAK DAS</div>
    <div class="from">10/19</div>
    <div class="to">06/21</div>
  </div>
</div>

We will be using two PNG's - one for the Visa logo, and the other for the credit/debit card chip. Use these images:

Logo
Chip

Now, add this CSS:



.card-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card {
  position: relative;
  height: 270px;
  width: 450px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(30px);  /* This will produce the blur */
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.logo img,
.chip img,
.number,
.name,
.from,
.to,
.ring {
  position: absolute; /* All items inside card should have absolute position */
}

.logo img {
  top: 35px;
  right: 40px;
  width: 80px;
  height: auto;
  opacity: 0.8;
}

.chip img {
  top: 120px;
  left: 40px;
  width: 50px;
  height: auto;
  opacity: 0.8;
}

.number,
.name,
.from,
.to {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  letter-spacing: 2px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.number {
  left: 40px;
  bottom: 65px;
  font-family: "Nunito", sans-serif;
}

.name {
  font-size: 0.5rem;
  left: 40px;
  bottom: 35px;
}

.from {
  font-size: 0.5rem;
  bottom: 35px;
  right: 110px;
}

.to {
  font-size: 0.5rem;
  bottom: 35px;
  right: 40px;
}

This should produce something like this:

Cool. Isn't it? We can spice it up with few more lines of code.

First, I will add two circles behind the card. Add this html (before the card-group block) and css:



<div class="circles">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
</div>



.circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(#006db3, #29b6f6);
}
.circles {
  position: absolute;
  height: 270px;
  width: 450px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle-1 {
  height: 180px;
  width: 180px;
  top: -50px;
  left: -60px;
}
.circle-2 {
  height: 200px;
  width: 200px;
  bottom: -90px;
  right: -90px;
  opacity: 0.8;
}

You should arrive at this:

Now, let's draw something on the card. After the to div (the last div inside .card), add another div having a class ring.



<div class="ring"></div>

And this css:



.ring {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  background: transparent;
  border: 50px solid rgba(255, 255, 255, 0.1);
  bottom: -250px;
  right: -250px;
  box-sizing: border-box;
}

.ring::after {
  content: "";
  position: absolute;
  height: 600px;
  width: 600px;
  border-radius: 50%;
  background: transparent;
  border: 30px solid rgba(255, 255, 255, 0.1);
  bottom: -80px;
  right: -110px;
  box-sizing: border-box;
}

Done!

Play with the code on my 👉codepen🚀.

Hope you liked it.
Happy Coding!😎

Design adapted from Sarah Newman

Forem: Shounak Das

Understanding Closures in JavaScript

Scope

Global Variables

Local Variables

Scope Nesting

The Lexical Scope

The Closure

CSS Display inline, block, and inline-block

1. inline

2. block

3. inline-block

15 Great Websites to Learn Front-end Development

I have created this amazing list of web resources which will help you become a front-end developer in 2021.

1. developer.​mozilla.​org

2. w3schools.​com and w3resource.com

3. htmlreference.​io and cssreference.​io

4. javascript.​info

5. css-tricks.​com

6. freecodecamp.​org

7. udemy.​com

8. codepen.​io

9. repl.​it

10. caniuse.​com

11. javascript30.​com

12. 30secondsofcode.​org

13. 1loc.​dev

14. goalkicker.​com

15. roadmap.sh

How to Create Striped Backgrounds with CSS

Horizontal Stripes

Vertical Stripes

Diagonal Stripes

Radial Stripes

Test your Internet Speed through the Command Line

Installing speedtest-cli on Linux

Installing speedtest-cli on Windows

Installing speedtest-cli on macOS

Running speedtest-cli

Create a Simple Text Editor with Python

File Handling

Opening and Closing a file

Reading a File

Writing to files

Output

Resources

How to Create an Overlay Effect with CSS

The Beginner's guide to CSS Illustrations - Part 2

Part 2 - Keeping things clean

Pseudo-elements

How to enable backdrop-filter in Firefox

The Beginner's guide to CSS Illustrations - Part 1

Part 1 - The Basics

Square

Rectangle

Circle

Ellipse

Pill

Egg

Triangle

Trapezium

Parallelogram

Create a Glassmorphic Credit Card with CSS

The Background

The Card

1. `inline`

2. `block`

3. `inline-block`

1. developer.mozilla.org

2. w3schools.com and w3resource.com

3. htmlreference.io and cssreference.io

4. javascript.info

5. css-tricks.com

6. freecodecamp.org

7. udemy.com

8. codepen.io

9. repl.it

10. caniuse.com

11. javascript30.com

12. 30secondsofcode.org

13. 1loc.dev

14. goalkicker.com