DEV Community: adriennemiller

Semicolons in JavaScript: To Use or Not to Use?

adriennemiller — Tue, 02 Apr 2019 05:36:07 +0000

During one of our first JavaScript lectures at the Flatiron School, the instructor mentioned that semicolons are optional in JavaScript… except when they’re not 🤔

I decided to look more into semicolon usage in JavaScript to truly understand why we would or would not want to use them, and use this knowledge to avoid creating any bad habits early on.

Peter Arkle, https://opinionator.blogs.nytimes.com/2012/07/02/semicolons-a-love-story/

Automatic Semicolon Insertion (ASI)

The reason semicolons are sometimes optional in JavaScript is because of automatic semicolon insertion, or ASI. ASI doesn’t mean that actual semicolons are inserted into your code, it’s more of a set of rules used by JavaScript that will determine whether or not a semicolon will be interpreted in certain spots. I found a helpful lecture from Fullstack Academy on the topic, which you can check out here. I also found a blog post from Bradley Braithwaite on the topic. Below I highlight the main takeaways from these resources.

3 Automatic Semicolon Insertion Rules:

Here are 3 main points to be aware of when it comes to ASI.

1- A semicolon will be inserted when it comes across a line terminator or a '}' that is not grammatically correct. So, if parsing a new line of code right after the previous line of code still results in valid JavaScript, ASI will not be triggered.

Example 1:



var beef 
var cheese

will become:



var beef; 
var cheese;

Example 2:



var a 
    b= 
    3;

here, grammar doesn't expect to see b after a, so ASI is triggered



var a; 
b = 3;

Example 3:



a = b + c 
(d + e).print()

equals:



a = b + c(d + e).print();

2- If the program gets to the end of the input and there were no errors, but it's not a complete program, a semicolon will be added to the end. Which basically means a semicolon will be added at the end of the file if it's missing one.

3- There are certain places in the grammar where, if a line break appears, it terminates the statement unconditionally and it will add a semicolon. One example of this is return statements.




function getCheese() {
    return 
    { 
       cheeseType: "Gouda"
    } 
}

This would trigger ASI and result in:




function getCheese() {
    return; 
    { 
       cheeseType: "Gouda"
    } 
  }

Expressions in a return statement should begin on same line, like this:



function getCheese() {

    return { 

       cheeseType: "Gouda"

    } 

  }

When Should I Not Use Semicolons?

Here are a few cases where you don't need semicolons:

if (...) {...} else {...}
for (...) {...}
while (...) {...}

Note: You do need one after: do{...} while (...);

Final Thoughts

If you're going to write your JavaScript without optional semicolons, it's probably good to at least know what ASI is doing. For example, compression or minification could cause your valid code to throw an error because those programs may rely on semicolons.

Also, it can be harder to debug without semicolons since your code may be concatenating together without you realizing it. If you put a line break where there shouldn't be one, ASI may jump in and assume a semicolon even if there shouldn't be one.

https://www.everywordcounts.co.uk/no-need-to-be-scared-of-semicolons/

Companies and open source projects will likely have a preference one way or another, so be sure to note what it is.

Finally, if you think you may be running into errors due to ASI, check out Babeljs.io to debug - it allows you to put in your code and shows you where ASI semicolons are being inserted.

What have you found to be true when it comes to semicolons in JavaScript?

Getting Started With CSS Art

adriennemiller — Wed, 20 Mar 2019 04:29:16 +0000

I was really captivated by one of the links included in DEV's newsletter this week. It was a link to this pure CSS image of Frida Kahlo created by Adam Kuhn.

Adam Kuhn's Frida Kahlo CSS Art

How Do You Create Art From Code?

While I do have some experience with HTML and CSS, I didn't have any idea how to put the pieces together to create an image this beautiful using only CSS. I decided to hunt around for a basic tutorial regarding pure CSS images and found the post "A Beginner’s Guide to Pure CSS Images" by Michael Mangialard. This is a great beginner-level tutorial that walks through each step of creating a CSS koala image. Each part of the koala is a separate HTML div element with different CSS styling applied to it. I highly recommend checking it out.

Michael Mangialard's koala CSS art:

My Own CSS Image Project

I went through the tutorial and made my own edits to the code to create a pig image instead of a koala.

My CSS pig project:

What is a CSS Image?

A CSS image can be made with just HTML and CSS code. HTML is a markup language that provides the basic structure and content for web pages, and CSS is what gives that content its styling. CSS images can be made by creating HTML div elements then giving them different sizes, shapes, colors, and positioning to create an overall picture.

An HTML div is a tag used for grouping elements together and then styling them with CSS or giving them behavior with JavaScript.

This is the code that creates the parent div box.

It's All Divs

For this project, all of the div elements that make up the image are nested within a parent div. This parent div is like an invisible frame around the pig's head. If the parent div is given a red border, you can see that it is essentially a box centered on the page. The child div elements positions are based on the relationship to the parent div. In other words, all the different pieces of the pig are positioned on the page in relation to that box.

The red outline shows the invisible box the parent div created.

The pig's head div is a child to the box div, and its positioning is based on its relationship to that box.

This is the code to create the pig's head, which is just a circle.

Z-Index

The rest of the elements that create the pig are positioned and styled this same way. A few also have a z-index, which allows you to stack the elements on top of each other in a certain order. So, for example, the pig's nose has a larger z-index than the eyes, since the nose lays on top of the eyes.

Clip-Path

Div elements are going to naturally be a rectangular shape. You can start curving the corners of the rectangle by setting a border-radius, and setting a border-radius of 50% will give us a circle.

For more complex shapes you can use a clip-path, which sets coordinates determining what part of an element should be shown. It's important to note that they are not supported by all browsers. You can learn more about them and their usage on Mozilla's website. I used a tool called Clippy, created by Bennett Feely, that allows you to draw the shape you want and then gives you the code for it. I used this to create the shape of the pig's ears.

Clippy allows you to easily make CSS shapes:

Are CSS Images Practical?

From what I can tell, CSS images aren't great for practical application. It would be much more effective to use a design program to create an SVG image. However, learning how to create them is a great way to become more familiar with CSS styling and I found it especially helpful in familiarizing myself with how positioning works.

Tools and References:
A Beginner's Guide to Pure CSS Images
Adam Kuhn's Frida Kahlo CodePen
Clippy
W3Schools CSS
Clip-Path - Mozilla

How The Internet Travels Through Oceans

adriennemiller — Tue, 12 Mar 2019 06:11:02 +0000

A couple of days ago I was watching this lecture by Avi Flombaum titled “How the Web Works”, and had to momentarily pause the video and freak out when he explained how the internet travels across oceans. Simply put, there are hundreds of underwater cables that have been put at the bottom of the ocean to transmit data internationally.

It's Not Magic

There is something so simple and yet so grand about this that I love. No, it's not satellites (well, there are some satellites...) or magic, it's simply a bunch of physical cables we installed.

Submarine Cables

There are currently around 378 underwater cables, over 1.2 million kilometers of cable total, that connect most of the world to the Internet.

TeleGeography offers an interactive Submarine Cable Map, which shows the overall map of cables and gives you info like that particular cable length, who owns it, and its landing points. I highly recommend checking it out.

What Are The Cables Made Of?

At their core, these cables use fiber-optics to send light signals, with lasers that shoot from one end to another at an extreme rate. The actual glass fibers that do this are very small, they have a similar diameter to a piece of hair, but they are covered with several layers of protection.

Still, the majority of the cable at the bottom of the ocean is only about the size of a garden hose. The layers of protection are increased in more shallow areas since there’s a greater chance of coming into contact with ships, etc. They’re also buried when close to shore for another layer of protection. However, out in the deep sea areas, the cables are laid directly on the ocean floor using a special machine.

Where Are The Cables Installed?

Precautions are taken to find the safest path for the cables to avoid areas where there’s a lot of fishing or where boats may be anchoring. It’s these types of human activities that cause the most damage to the cables. Although there are about 100 cable faults each year, you would probably never notice because companies use redundant cables so there’s always backup.

Also, the cables are laid based on which locations have something to communicate with each other. So, you can see there are not a lot of direct lines between Australia and South America, but instead, they both have many cables linking to North America. This is suggesting that they both have a need to send and receive info from North America.

Fast Facts

Here are some additional facts, in case you’re as fascinated with these cables as I am:

-The first oceanic cables ever installed were telegraphic lines laid across the Atlantic Ocean in 1866.

-It only takes one boat to carry all the cable needed for these transcontinental connections.

-Every 50 miles under the ocean there are blocks called repeaters that help amplify the light so it can travel all the thousands of miles.

-In 2013 three scuba divers were caught trying to cut an undersea Internet cable in the Mediterranean, which slowed down the Internet for about a week.

-While sharks are known to occasionally bite the cables, they are not seen as a major threat to the Internet. Human activity accounts for about 2/3 of damages to the cables.

When did you learn that the world was connected via underwater cables? Am I the last to learn this? I'd love to hear any feedback or additional facts you have about our underwater system!

Resources:
Telegeography FAQs
Submarine Cable Map
History Channel
Wired
California Diver
CBS News