DEV Community: Lorenzo

Articles: 400+ JavaScript Interview Questions 🎓 With Answers
250+ JS Resources to Master Programming 💥 Cheat Sheet Projects ideas to become a javascript master 🚀

Thanks for reading, hope you as fast as he is now:

Remember the ❤️ if you appreciated or even better..

Subscribe to our Newsletter!

The full PDF version of my articles!
Curated Weekly digeeeeeest every Tuesday
4 JS Cheat Sheets for free, received in no time
Gifts, lots of 🎁. We send cheat sheets, coding advice, productivity tips, and many more!

--> Already more than 1200 subscribers!

Do You Stack Overflow?

Lorenzo — Fri, 14 May 2021 07:45:48 +0000

Quick survey: You use Stack Overflow...

❤: Always - In all my projects
🦄: Often - When I have a bug / difficulty
🏷: Never - I'm smarter

Hello World! We are back with the #healthydebate series! It's time to get serious because today we're talking about Stack Overflow. It's very present in the developer's imagination, but in reality, how much do we use it? Let's discover together!

Also, by telling your experience, you have a chance to get featured in our newsletter.

The question of the week is: How much do you use StackOverflow in your developer life?

Question time: <-- To help you answer the big question above

When did you first meet / use StackOverflow? How did you feel?
How much do you use Stack Overflow on your daily basis?
How do you usually treat the answers, do you directly copy the code / just read and change yours / make a mix...
How is Stack Overflow considered among your colleagues? What do you think of those who search for too much code there?

Use the comment section to reply!

You can receive the weekly discussion recap directly in your email for free!

Bonus: How to handle any exception

Images Source:

50 Best Inspiring Form Designs 🎨

Lorenzo — Fri, 07 May 2021 13:36:09 +0000

Hello World! Today we are talking about Forms! They're everywhere, and when you least expect it, they can have a huge impact on your conversion rate. Even if you thrive a lot of traffic on your sites, you'll need to convert this traffic into users. I managed to bring the conversion rate (views divided by conversion) of my landing page to 60%. To make you understand, the average landing page conversion rate across all industries is 2.35%. So, let's start.

Read also:

Article No Longer Available

First, what makes a good Form?

Spoiler
Its design.
And its backend 😉, for that you should know Getform.

1. Fundamentals

All forms need to have some core elements that you cannot remove. I advise you to create two forms, a general one to put on your site, which must be minimalist. This one serves especially when asking the user to sign in for something (account, newsletter...). Then you should also make a landing page for those who want to perform that action. An in-website form finds the user unprepared, you have to be direct, he didn't ask for that action, you have to make him want to do it. Use banners or a small section of the page with really just the core input boxes. At most you add more after the user has entered these (on another page, after the redirect).
On the contrary, on a page dedicated 100% to the form, you can be more free and creative! The goal changes, you no longer have to convince the user to stay, but not to leave. On this page add all the useful elements, the main ones are illustrations, testimonials, freebie, an about us section, a timer, social links...
For the illustrations, if you can't, even if it is recommended to make them by yourself, you have lots of free resources online. Some examples are Adobe Stock, unDraw, IRA Design, DrawKit, Absurd Illustrations or ManyPixels. Also, use the out-of-frame (for illustrations for example) to kind of bring the web page out of the screen.
Another important tip that not everyone thinks about is to thank the user in the end. Many think that when the user has signed up the work is finished, but no! it's the other way around, when the user signs up your journey together has just begun.

2. Simplicity - Intuitivity

The first very important thing, on which too many campaigns fail, is SIMPLICITY. It may seem easy, but you always have to remember that users have no time. You have hundreds of competitors out there that want their forms to work too. Your users can't spend 15 minutes finding the place to put the email and another 15 for the password. You have to be immediate. To have a clear, big and central CTA!
Not more input that strictly necessary. In reality, you should always remember that, like with many things in life, too many is bad, as it's not enough (too little). Too many colors and your form looks like a rainbow, too few and the user thinks to be in a black and white film. Too much content and the user literally no longer understands anything, too little and the form becomes anonymous. It's up to you to find the right balance.
Your form must be intuitive, the user must immediately understand what to put and where. Don't modify too much your field labels.
Give the user what they expect to receive. Don't lie to attract traffic, you will lose credibility and fail in the long run.

3. Organization - Respect of the brand guidelines

This is another very important thing you need to care about, you need to have a clear organization. Just respect that Brand guideline! First, make sure your logo is on the page and given we are not Nike (your logo is not as recognizable and famous), add your name next to it. Then, especially for landing pages, you should have a big and clear title at the top. You can then switch between text, medium and small titles, images, and special copy (jokes, quotes, links..). The key here is consistency, the same piece of information should be the same way on all your pages. For example, all your medium titles should have the same size, same color, same positioning...
Remember to respect the rules of your brand, such as the main colors up to the organization of the page.
Also, remember to always add your other important links (socials), but never abuse them in a form, they make users flee. A subscriber on the site is more important than a like on a social network.

4. Animations

I decided to dedicate a whole section to animations, they deserve that. Your page should move, you're not building an 80s site! Here too balance is everything, you don't have to be in excess, but a good number of animations change your page, and most of all, your conversion rate! You should give visual feedbacks for everything the user does, the basic one is when he hovers a button / a link. In forms, it's very cool to give feedback in real-time while the user writes. You should also combine animations with illustrations, you can easily make a kind of slideshow with animation (Like here). But if you want to go beyond your limits, try creating real animations! An idea could also be to use video to retain your users and get yourself better known in a more interactive way.
The last comment is that your website should also work without animations, you cannot rely on them 100%, or you will lose users. Not just for those who don't have JS, but also just for the load time. Allow the user to at least interact with the form before anything else.

5. Creativity

Now that you know them, break the rules! Give the user unexpected fun animations in a controlled environment. Your final goal is to engage him, don't bore him. Make him have fun in the process, that's a good plus! Play with the colors, the content, the animations... Remember to always be out of the box. We are all good at being the same as others, the strength is in being unique. Add your personal style. and add things that no one would expect. Sometimes it is better to take risks. Try also to work on images and illustrations, don't just copy the first one on internet but only the best or better, upload yours!
Also, giving a freebie radically changes your conversion rate. I give a Udemy free course (giveaway) and a JS cheat sheet.

As you just understood, designing a form can be really tough, but these designs and real-life examples will help you for sure!

Designs / Concepts

1. Login - Dark Mode

2. Contact - Simplicity

3. Sign-up - Creative

4. Sign-up / Sign-in - Switch

5. Sign-up / Sign-in - Switch 2 - Satisfying

6. Sign-up - Neumorphism / Futuristic

7. Newsletter - Simplicity

8. Password - Fun / Original

This was actually done by one of our writers, @marcobiedermann!

9. Checkout - Complete / Trust - For entreprises

10. Credit Card Info - Perfect

11. Search - Immediate

12. Search - Expandable

This article may contain sponsored content and I may earn something sponsoring them, at no costs for you.

Getform

Hey busy front-end dev, why spend hours taking care of the back-end, which is so boring, when you can use Getform and save hours for real fun? Such as designing a successful form!
Getform is a modern form backend platform that lets you handle your forms on your websites and apps. You can set up a form and start collecting submissions to your form within minutes without having to setup a server or writing any backend.

Getform can be easily integrate with all the development frameworks, JAMStack, no-code and CMS platforms. Such as Next.js, React, Hugo or GatsbyJS. They also allow you to connect your forms with Zapier, Slack, Airtable, Google Drive, Intercom, MailChip, GitHub, or even Discord!

The core features of this fantastic product are:

Email notifications

If you wish to receive an email everytime a visitor submits to you form, you can setup email notifications using the email notification plugin. More here

Advanced workflows using Zapier

Getform lets you integrate with other tools to allow you to wrangle your form submissions. Using Zapier integration, you can accept incoming submissions and connect with more 1500+ applications. More here

Spam preventing with reCAPTCHA

Spam is also a real thing. You don’t want your inbox flooded with spam, so you can take advantage of Getform's Google reCaptcha Integration for both of the reCaptcha versions. More here

--> And File Upload Forms!

Real-Life Examples

1. Reddit

2. Medium

3. Grammarly

4. Miro

5. Pinterest

6. Discord

7. Netflix

8. GitHub

9. Netlify

10. Docker

11. Getform

12. Framer

13. Figma

14. Friday

15. LunchClub

16. Pluralsight

17. Unsplash

18. Squarespace

19. Postman

20. Quarkly

21. Wappalyzer

22. Craftwork

23. Jacek Jeznach Porfolio

24. Blush design

25. Designstripe

Thanks for reading and Happy coding ❤

🎉 Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:

👍 React to this post
✉️ Subscribe to our newsletter <-- Very important

This article is sponsored by Getform:
Collect submissions, receive emails and connect your HTML form
with popular apps. Perfect for JAMStack and API-driven static websites. <-- Trusted by 25K+ customers, processed over 30M+ submissions, with fully secure infrastructure!

Web Dev Notes - Resource Compilation + Cheat Sheet

Lorenzo — Tue, 04 May 2021 13:57:29 +0000

Hello World! Seems like we're in a streak to be the best articles of the week here at DEV, will this one be too at the top? Leave a like to know! I discovered online an incredible Roadmap / Web Development notes written by Bronson Avila, who in his great kindness allowed me to post the content here. Hope this will help you!

--> Grab the downloadable PDF version here

🔖 - Waaait, don't leave this page without bookmarking (save) it!!

Table of Content:

Frontend
1. HTML
2. CSS
3. Bootstrap
4. Javascript Basics
5. DOM
6. JS Advanced

<-- Conversion to Markdown In Progress --> Available here for now

Backend
1. Basics
2. Command Line
3. Node
4. Express
5. RESTful
6. Databases
7. Authentication
8. Git
9. Deployment

Remember the like ❤️

Frontend

HTML
CSS
Bootstrap
Javascript Basics
DOM
JS Advanced

HTML

Document (individual elements combined to form an entire HTML page)

Doctype: <!DOCTYPE html>

Required as the first line of an HTML document (historical artifact).

Root Element: <html>

Follows the "doctype" and wraps around all content on the entire page.

Head Element: <head>

Container for things that do not appear as viewable content (e.g., keywords and descriptions that will appear in search results, CSS, character set declarations, etc.).

Character Set: <meta charset="UTF-8">

Allows document to use "utf-8" character set, which includes most characters from all known human languages (nests within head element).

Title: <title>

Sets the title that appears in browser tab (nests within head element).

Also appears as the search result in Google.

Body: <body>

Contains all of the content that will be shown to the viewer.

Elements (content + opening/closing tags)

Article: The ultimate HTML Tags Cheat Sheet 🔥

Block Elements form a visible block on a page (e.g., paragraphs, lists, navigation menus, footers, etc.):

Paragraph: <p>

Divider: <hr>

Headings: <h1> through <h6>

NOTE: As a general rule, try to have only one <h1> tag in your HTML document, and it should be the biggest text element on the page.

Generic Container: <div>

Lists (each item within a type of list needs to be identified by the "<li>" tag):

Ordered Lists (lists that are numbered): <ol>

Unordered Lists (lists composed of bullet points: <ul>

Tables: <table>

Table Row: <tr>

Table Header (consists of one cell within a row): <th>

Should be nested within <thead> under main table (semantics).

Table Data (consists of one cell within a row): <td>

Should be nested within <tbody> under main table (semantics).

Borders can be added by entering <table border="1">, although this is discouraged, as CSS should be used for styling.

Forms (interactive controls to submit information to a web server): <form>

Typically contain the "action" (the URL to send form data to) and "method" (the type of HTTP request, such as "GET" to receive information from the server and "POST" to add information to the serve) attributes, e.g.:\
<form action="/my-form-submitting-page" method="POST">

Input (used to accept data from the user): <input>

The operation of <input> depends upon its type attribute. For a complete list of attributes, view Form Input Types. Examples:

Text (can be used for user names): type="text"

Password: type="password"

Placeholder (temporary text in input fields; used with "text" and "password" attributes): placeholder="insert-text-here"

Button: type="button" value="insert-text-here"

Simple Submit button: type="submit"

Alternatively, if placed at the end of a form, use the following to create an even simpler submit button: <button>insert-text-here</button>

Checkbox (square box for multiple choices): type="checkbox"

To have the checkbox already marked upon loading, add the attribute "checked" to the input.

Radio Button (circular icon for one choice): type="radio"

In order to make the user only able to select one choice, you must add the "name" attribute, which must be common among all choices.

The "value" attribute is necessary for the query string to understand the meaning behind each choice; otherwise, it will simply state "name=on".

Example:

<label for="cats">Cats:</label>
    <input name="pet-choice" id="cats" type="radio" value="CATS">
    <label for="dogs">Dogs:</label>
    <input name="pet-choice" id="dogs" type="radio" value="DOGS">

Dropdown Menus: <select>

For every possible option to select, use an <option> tag.

In order for the query string to understand that an option has been selected from the dropdown menu, the "name" attribute must be included in the <select> tag, e.g.:

<select name="color">`
    <option>White</option>\
    <option>Black</option>\
</select>

If you want the query string to contain text other than "White" or "Black" in the example above, use the "value" attribute in the <option> tag, e.g.:
<option value="happy">☺</option>

Text Areas (multi-line plain-text editing control): <textarea>

You can specify how large the text area is by using the "rows" and "cols" attributes.

In order for the query string to process the data in the text area, you must use the "name" attribute.

Example: <textarea name="paragraph" rows="10" cols="50"></textarea>

Labels (add captions for individual items in a form): <label>

A label can be used by placing the control element inside the <label> element, or by using the "for" and "id" attributes:

For example,

<label>Username<input type="text"></label>
    ...is identical to
<label for="username">Username</label>
<input id="username" type="text">

Validations ensure that users fill out forms in the correct format, e.g.:

The Boolean attribute "required" makes a field mandatory:
<label>Username<input type="text" required></label>

Only works if the browser (like Chrome) allows it.

By changing type from "text" to "email", the browser will ensure that the field contains an @ symbol.

Inline Elements are contained within block level elements and do not cause new lines to appear:

Italics: <em>

Bold: <strong>

Generic Container: <span>

BUT NOTE: Empty Elements contain only a single tag:

Image: <img src="https://www.google.com/logo.png">

NOTE: Image width can be modified like so...
<img width="50" src="https://www.google.com/logo.png">
...but is discouraged, as styling should be done by CSS.

Input: <input type="text">

For a complete list of elements, view the MDN Element Reference.

TIP: In Sublime, press "Ctrl+Shift+D" to replicate an entire line of an element.

Attributes (extra info; does not appear in content; target of style info)

Components:

Space between it and the element name (or prior attribute),

Attribute name followed by an equals sign, and

Attribute value surrounded by quotation marks.

Double or single quotes may be used, but must be done consistently. You can nest a single quote within a double quote (and vice versa), but if you want to nest the same type of quote, you must use HTML Entities (e.g., " or ').

Examples:

Class: <p class="editor-note">content</p>

Can be paired with the "anchor" element: <a>

Hyperlink with Title:
<a href="https://www.google.com/" title="Google">content</a>

BUT NOTE: Boolean Attributes can be written without a value, but technically always have only one value (generally the same as the attribute name:

Disabled: <input type="text" disabled="disabled">

Creates a text box in which typing is disabled.

May also be written as:
<input type="text" disabled>

For a complete list of attributes, view the MDN Attribute Reference.

Entity References (make special HTML syntax characters appear as normal text):

<  =  &lt;

>  =  &gt;

"  =  &quot;

'  =  &apos;

&  =  &amp;

HTML Comments (write comments in the code that are invisible to the user by wrapping them in special markers):

TIP: In Sublime, you can (1) select text, and (2) hold "Ctrl+/" to turn text into comment.

⬆ Back to Top

CSS

The General Rule

selector {
property: value;
anotherProperty: value;
}

For example, make all <h1> tags purple with 56-pixel font:

h1 {
    color: purple;
    font-size: 56px;
}

Three Basic Selectors:

Element selectors select all instances of a given element. For example, "div" is a CSS element selector that will modify the properties of all <div> HTML tags.

The ID selector selects a single element with an octothorp ("#") ID (only one per page). For example, the following HTML/CSS combination will result in the word "hello" appearing in yellow, while the word "goodbye" will remain as is:

<div>
    <p id="special">hello</p>
</div>
<div>
    <p>goodbye</p>
</div>

#special {
    color: yellow;
}

The Class selector selects all elements in a given class by functioning just like an ID selector; however, a class is instead prefaced with a period ("."). For example, the following items marked as "completed" on a "To Do List" will be crossed out with a line:

<div>
    <p class="completed">TASK #1</p>\
</div>
<div>
    <p class="completed">TASK #2</p>\
</div>

.completed {
    text-decoration: line-through;
}

An element can be modified by multiple class or ID tags by simply adding a space between the two tag names, e.g.:
<p class="completed uncompleted">Text</p>

Five More Advanced Selectors:

The Star (*) selector applies to every element on the page.

The Descendant selector applies to selectors that have been "nested" under another. For example, if you want to modify the color of only those <a> tags that are nested within the <li>tags of a <ul> list, use the following:

ul li a {
    color: red;
}

In addition to HTML tags, CSS selectors such as "ID" or "Class" may be used within a Descendant selector.

HOWEVER: If, for example, you have a second-tier <ul> nested within a first-tier <ul> that is nested within <div id="box">, and you only want to select the first-tier <ul> and not the second-tier, then you must use the ">" combinator to select only the DIRECT first-tier "child" <ul> (rather than the second-tier "grandchild" <ul>) of <div id="box">:

#box > ul {\
    color: red;\
}

The Adjacent (+) selector will select only the element that comes IMMEDIATELY after another element (a "sibling" element, rather than a "nested" element). For example, to modify the font size of all <ul> tags that follow an <h4> tag (which are typed on the same "level" as the <ul> tags, and not nested under them), use the following:

h4 + ul {
    font-size: 24px;
}

If, in the above example, you want to select ALL <ul> tags after any <h4> tag, then use the more generalized sibling combinator of "~" instead of "+".

The Attribute selector will allow the selection of any element based off of any attribute. For example, to change the font family of all <a> tags that link to Google, use the following:

a[href="https://www.google.com/"] {
    font-family: cursive;
}

This selector an also be used to select all images of a particular source, or all inputs of a particular type, such as all checkboxes:

input[type="checkbox"] {
    border: 2px solid green;
}

TIP: See the complete list of Attribute Selectors.

The Nth-of-Type selector takes a specific number and selects the "-nth" instance of an element. For example, to change the background color of every second <li> tag in every list (literally meaning the second tag, not every other tag), use the following:

li:nth-of-type(2) {\
    background-color: rgba(100, 175, 225, 0.5);\
}

NOTE: To select every other tag, use the phrases (even) or (odd) instead of a specific number.

For more advanced selectors, view The 30 CSS Selectors You Must Memorize.

CSS Location:

CSS should generally be saved to its own file, but can also be included in the HTML head by using the <style> tag:

<style type="text/css">
li {
    color: red;
 }
</style>

The preferred method is to use a <link> tag in the HTML head to refer to the separate file containing CSS:
<link rel="stylesheet" type="text/css" href="directory/filename.css">

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied (e.g., if the body is styled to have red text, but a paragraph within the body is styled to have green text, then the text will be green because the green text style is more relevant to the specific paragraph than the general body).

The following list of selector types increases by specificity (in magnitudes of 10):

Type selectors (e.g., li) and pseudo-element (e.g., :before)
Class selectors (e.g., .hello), attributes selectors (e.g., [type="text"]) and pseudo-classes (e.g., :hover)
ID selectors (e.g., #hello)

This Specificity Calculator may be used to test CSS specificity rules.

The Box Model

In a document, each element is represented as a rectangular box. In CSS, each of these boxes is described using the standard "box model." Each box has four edges: (1) Content Edge, (2) Padding Edge, (3) Border Edge, and (4) Margin Edge. Padding is the space between the border and the element within the border, and the margin is the space between the border and everything outside of the border.

The content edge can be controlled by setting the "width" and "height" properties in "px" or "%" (with percentage in relation to the parent element), which in turn pushes out the border edge as well, as there is direct contact between the content and border (if no padding has yet been set).

NOTE: By using the "max-width" property in conjunction with "width", you can tell the browser to make an element's width a certain percentage, but then also cap that width to a maximum number of pixels, e.g.:\

#container {\
    width: 66.66%;\
    max-width: 700px;\
}

Space can be added between the content edge and border edge (and between the border edge and the next element's edge) by using the "padding" and "margin" properties respectively (in "px" or "%").

By default, padding and borders are set to go around all edges of an element, but can be limited by using more specific properties for top, right, bottom, and left---such as "padding-left" or "margin-top".

Alternatively, rather than typing a line of CSS for all four sides, the following shorthand can be used (with the first value setting the top property, and the remainder moving in a clockwise fashion):

p {
    margin: 20px 40px 60px 80px;
}

NOTE: By setting the "margin" property to "auto" on the left and right, an element will automatically be horizontally centered:

p {
    margin: 0 auto 0 auto;
}

The above syntax can also be shorted as (with the first value representing the vertical axis, and the second value representing the horizontal axis):

p {
    margin: 0 auto;
}

Colors

Colors can be created through the Hexadecimal system by combining the octothorp (#) with a string of 6 hexadecimal "numbers" from 0-F, e.g.:
color: #FF1493;

This system follows an RGB scheme in which the first two numbers modify the amount of "red," the second two modify "green," and the last two modify "blue."

Alternatively, colors can be created through the RGB system: 3 channels consisting of red, green, and blue, with each ranging from 0-255, e.g.:
color: rgb(0, 255, 0);

Colors can be made Transparent through the RGBA system. Just like RGB but with an alpha (transparency) channel ranging from 0.0-1.0, e.g.:
color: rgba(11, 99, 150, .6);

Backgrounds

Follows the same format as colors, e.g., background: #FF6789;

The background property can also set a background image, e.g.:

body {
    background: url(http://www.website.com/image.png);
}

To prevent the background from Repeating an image, add the following property:
background-repeat: no-repeat;

To allow the background image to Stretch out across the entire body, use:
background-size: cover;

Borders

Borders have three key properties: "width" (typically in pixels), "color" (as noted above), and "style" (generally solid, dotted, or dashed). All three properties must be present in order for a border to take effect, e.g.:

h1 {\
    border-width: 5px;
    border-style: solid;
    border-color: purple;
}

The alternative shorthand syntax may also be used (in the specified order):
border: 5px solid purple;

Article: CSS: How to make a cool border animation

Fonts

Font-Family specifies the font for an element:

p {
    font-family: Arial;
}

While not always necessary, you may sometimes have to put quotation marks around the font name---particularly when the font name begins with a number.

CSS Font Stack shows what percentages of operating systems have a given system font (useful for choosing a safe bet on system compatibility).

However, rather than using those limited fonts, it is better to use Google Fonts, choose a font, and embed the font's stylesheet link in your HTML <head> prior to the CSS link, e.g.:
<link href="https://fonts.googleapis.com/css?family=Esteban" rel="stylesheet">

Font-Size specifies how big the font appears (typically in pixels or "px"):

h1 {\
    font-size: 25px;
}

Another size unit is "em", which dynamically sets font size in relation to a parent element. For example, if you want to make a section of a paragraph's text in tags be twice the size of the rest of the text in the <p> tags, you would say:

span {\
    font-size: 2em;\
}

BUT NOTE: What constitutes the "standard" 1em (i.e., the default font size on a page without CSS markup) varies from browser to browser, although the size is typically around 16 PIXELS. To ensure uniformity among browsers, it is useful to set the body's font size at the outset.

ALSO: Similar to "em" is "rem", which---rather than setting font size in relation to the parent element---sets the font size in relation to the "root" element on the page (i.e., the default font size discussed above).

Font-Weight specifies how thick or thin the font appears.

Typically involves absolute values of "normal" or "bold", or relative (to parent) values of "lighter" and "bolder", but can also be assigned a numeric value in increments of 100 generally from "100" to "800" depending on the font itself.

Line-Height controls the height of a given line (similar to changing line spacing in Word to 1.5 or 2.0, which means that a larger font will result in larger spacing).

Text-Align controls where an element's text is aligned on the page (typically "left", "right", and "center").

Text-Decoration is used to give text effects such as "underline", "overline", or "line-through".

Float

Normally, block level elements (such as <div>) are stacked directly underneath the preceding element on the page. To change this, use the "float" property and specify a value of the direction in which the element should float ("left", "right", "none").

When an element is floated, it is taken out of the normal flow of the document (though still remaining part of it), and it is shifted to the left or right until it touches the edge of its containing box, or another floated element.

When <img> tags are laid out in a consecutive sequence, HTML automatically places some small amount of white space between the images. If you want to remove the white space, you can use "float" to remove that white space.

Article: CSS: How to make a website responsive

⬆ Back to Top

Bootstrap

About

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects.

To incorporate Bootstrap's CSS into your project, you can do either one of the following:

Download the bootstrap.css file, placing it into your project directory, and creating a <link> to the bootstrap.css file; or
Paste the following <link> to the bootstrap.css file, which is hosted online:\
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

NOTE: The semantics in Bootstrap have been criticized as being sometimes meaningless, and another contender for performing these tasks is Semantic UI. However, Bootstrap is more popular and widely accessible through tutorials.

Important Pieces

Buttons require that they be identified first by a "btn" class followed by a second specific class.

There are seven specific classes:

Default (standard white button): btn-default

Primary (provides extra visual weight; set to be the primary action in a set of buttons): btn-primary

Success (indicates successful or positive action): btn-success

Info (contextual button for informational alerts): btn-info

Warning (indicates caution should be taken): btn-warning

Danger (indicates a potentially dangerous action): btn-danger

Link (deemphasizes the button to look like a link while behaving like a button): btn-link

Buttons classes can be added to the <a>, <button>, or <input> elements, e.g.:

<a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">

Button sizes can be reduced or increased by adding a third size class.

Large: btn-lg

Small: btn-sm

Extra Small: btn-xs

To make a button appear "active," add the "active" class:
<button class="btn btn-success btn-xs active">Text</button>

To disable a button, add a "disabled" attribute and set its value to "disabled":
<button class="btn btn-success btn-xs" disabled="disabled">Text</button>

Jumbotron (class="jumbotron") extends the entire viewport to enlarge and showcase key content within.

By default, the Jumbotron will extend across the entire width of the screen. To prevent this behavior, place the <div class="jumbotron"> within a <div class="container">, as the "container" class in Bootstrap will add padding and margins to center the Jumbotron.

Forms

Basic Form

Applying the class="form-group" attribute to all <div> elements in the form optimizes the spacing between the elements (e.g., between the username and password field).

Applying the class="form-control" attribute to an <input> element improves the style of the normal default appearance (adds rounded corners, padding, spacing, focus effects, etc.), but also makes changes to how the element behaves within the grid system.

Applying the class="help-block" to a <p> element modifies the text of a helpful hint to be more subtle and subdued in appearance.

Inline Form

A basic form will lay its contents by stacking them on top of each other. However, by applying the class="form-inline" to your form (which doesn't necessarily have to be a <form> element) will place its contents in a line from left to right.

Navbar

Navbars serve as navigation headers for an application or site. Navbars must be placed within a <nav> element, and, like buttons, require a general "navbar" class followed by a second specific class (typically "navbar-default", but may also be "navbar-inverse" for an inverted color scheme).

A navbar may contain a "Brand" image (e.g., company name or logo) as the first object in the navbar. This is constructed by creating a "navbar-header" and placing an anchored "navbar-brand" within the header (to add a link to the homepage, typically), and then an <img> within the brand, if desired:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#"><img src="#"></a>
    </div>
</nav>

The remaining content on the Left Side of the navbar should appear outside of the <div> containing the "navbar-header", and it should be placed in <ul class="nav navbar-nav">. Each item within the navbar should be marked with <li> tags (and those should contain an <a> tag if a link is desired).

NOTE: The <li> tags will function normally even if contained in a <div> rather than <ul>; however, the <ul> should be used for semantics.

To add additional content to the Right Side of the navbar, use <ul class="nav navbar-nav navbar-right">.

To ensure that the content on the right side does not press too squarely on the right edge of the browser, everything within the <nav> should be placed within a <div class="container"> (fixed width) or <div class="container-fluid"> (full width).

To get the full benefit out of a navbar (such as dynamic dropdown menus), you must install the Bootstrap JavaScript file in your HTML <body>. Like "bootstrap.css", you can either use the "bootstrap.js" file downloaded from Bootstrap, or you can use the following link:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

NOTE: Bootstrap's JavaScript requires jQuery to work, and its <script> must be placed BEFORE Bootstrap's:
<script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

To have items Collapse when the browser hits mobile size, place everything that you want to collapse inside <div class="collapse navbar-collapse">.

To add the "hamburger" icon that provides a dropdown icon for the collapsed items, (1) change the above <div> to read <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">, and (2) place the following <button> within the "navbar-header":
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
 </button>

The three "icon-bar" classes are responsible for making the three bars in the icon.

The "data-target" attribute is responsible for showing/hiding the content when the icon is clicked. The value of this attribute should be set to whatever <div> (by ID) you want to show/hide.

To keep the navbar Fixed to Top, include the "navbar-fixed-top" class, and add a minimum of 50px of padding to the top of the <body> (as the navbar itself is 50px high), although it may better to add a little more for extra space.

Glyphicons

To place icons, use the link above to find the class of icon you wish to use (e.g., an envelope icon), and insert it according to the following syntax:
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>

The icon <span> should contain no text or child elements.

The aria-hidden="true" attribute is used to hide decorative icons on assistive technologies (e.g., Screen Readers). If the icon is not decorative and is intended to convey meaning, then that meaning can be added through by using <span class="sr-only">, e.g.:

<div class="alert alert-danger" role="alert">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span class="sr-only">Error: Enter a valid email address</span>
</div>

If you're creating controls with no text (such as a <button> that only contains an icon), you can add an "aria-label" attribute to the control and make its value be a description that will appear on screen readers.

For additional icons, install Font Awesome by placing the entire directory into your project, and then inserting the following into your <head>:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

The Grid System

Bootstrap includes a fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. These 12 columns are contained within every instance of <div class="row">. You can then place additional <div> elements within each row and divide them by the following syntax: <div class="col-size-#">.

The "#" option determines how many columns (out of 12) the <div>will occupy. In the following example, the first row will have 3 evenly spaced <div> groups that are each 4 columns wide, and the second row will have 2 <div> groups, with the first being 9 columns in width and the second being 3 columns:

<div class="container>
    <div class="row">
       <div class="col-md-4">First Symmetrical Group</div>
       <div class="col-md-4">Second Symmetrical Group</div>
       <div class="col-md-4">Third Symmetrical Group</div>
    </div>
    <div class="row">
       <div class="col-md-9">First Asymmetrical Group</div>
      <div class="col-md-3">Second Asymmetrical Group</div>
    </div>
</div>

The "Size" option determines the width of the <div>, which determines the "breaking point" at which the <div> elements in a single row will take up a full 12 columns and stack on top of each other, rather than appear side-by-side.

Four sizes and breaking points:

Extra Small ("col-xs-#") for mobile phones: Auto width.

Small ("col-sm-#") for tablets: 750 pixels.

Medium ("col-md-#") for smaller monitors: 970 pixels.

Large ("col-lg-#") for larger monitors: 1170 pixels.

Given the sizes above, if you were to have 4 <div class="col-md-3"> elements, the 4 elements would appear side-by-side until the screen width dropped below 970 pixels, at which point all 4 would stack on top of each other. If, however, you wanted tablet users (below 970 pixels) to see the first two elements appear side-by-side and the last two elements below, you would say: <div class="col-md-3 col-sm-6">.

This system also allows for Nesting additional "row" classes within other existing grid elements, e.g.:

<div class="container">
    <div class="row">
       <div class="col-md-3 col-sm-6">
          <div class="row">
             <div class="col-sm-6">First half of Group "1"</div>
             <div class="col-sm-6">Second half of Group "1"</div>
          </div>
       </div>
       <div class="col-md-3 col-sm-6">Group "2"</div>
       <div class="col-md-3 col-sm-6">Group "3"</div>
       <div class="col-md-3 col-sm-6">Group "4"</div>
    </div>
</div>

Notes for Image Galleries:

Visit Unsplash for free high-quality images.

In order for images to be appropriately sized within its grid, a quick method is to nest the image within the "thumbnail" class, e.g.:

<div class="col-lg-4 col-md-6 col-sm-6">
    <div class="thumbnail">
       <img src="files/01.jpg">
    </div>\
</div>

NOTE:

If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as Masonry, Isotope, or Salvattore.

If you don't mind the images being of varying heights, but want to get rid of the white space bug, then see here.

If you want to crop all of the images to the same size, then see an example of this here.

⬆ Back to Top

JS Basics

JavaScript (Basic)

Intro - For beginners

What is JS (Javascript)

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies. MDN

What it used for?

To put things simply, JavaScript is an object orient programming language designed to make web development easier and more attractive. In most cases, JavaScript is used to create responsive, interactive elements for web pages, enhancing the user experience. Things like menus, animations, video players, interactive maps, and even simple in-browser games can be created quickly and easily with JavaScript. JavaScript is one of the most popular programming languages in the world. BitDegree - What Is JavaScript Used For And Why You Should Learn It

Hello World In Javascript:

alert("Hello World") — Output data in an alert box in the browser window
confirm("Hello World") — Opens up a yes/no dialog and returns true/false depending on user click
console.log("Hello World") — Writes information to the browser console, good for debugging purposes
document.write("Hello World") — Write directly to the HTML document
prompt("Remember the like!") — Creates a dialogue for user input

Resources to learn it:

Mozilla’s JavaScript Guide
JavaScript track on Codecademy: Interactive tutorials for beginners.
JavaScript for Cats by Max Ogden
Eloquent JavaScript by Marijn Haverbeke
Wikibooks’ JavaScript book
JavaScript Lectures by Douglas Crockford
You Don't Know JS - Possibly the best book written on modern JavaScript, completely readable online for free, or can be bought to support the author.
braziljs/js-the-right-way - An easy-to-read, quick reference for JS best practices, accepted coding standards, and links around the Web.
JSbooks - Directory of free JavaScript ebooks.
Superhero.js - A collection of resources about creating, testing and maintaining a large JavaScript code base.
SJSJ - Simplified JavaScript Jargon is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words.
How to Write an Open Source JavaScript Library - A comprehensive guide through a set of steps to publish a JavaScript open source library.
JavaScript Tutorials - Learn Javascript online from a diverse range of user ranked online tutorials.
Functional-Light JavaScript - Pragmatic, balanced FP in JavaScript.
Clean Code JavaScript - Clean Code concepts adapted for JavaScript.
List at GitHub - Awesome Javascript - By Alexandru Gherasim

At Reddit - What 10 Things Should a Serious Javascript Developer Know Right Now?

Scope. If you don't understand this intimately then you aren't that serious about this language. This is the number one point intentionally and I cannot stress it enough.
Architecture. You don't have to be a master software architect, but if you cannot perform some basic planning and put pieces together without massive layers of tooling you are an imposter. Expecting frameworks and other tools to simply do it for you isn't very impressive.
DOM. It is very common to see developers hiding from the DOM by layers of abstractions and other stupid crap. querySelectors are great, but are also 2800x slower than the standard DOM methods. That isn't trivial. These methods are super simple, so there is no valid excuse for developers fumbling over this or hiding in fear. http://prettydiff.com/guide/unrelated_dom.xhtml
Node.js If you are a serious developer should have a pretty solid grasp of how to walk the file system. You should understand how to conveniently read files as text or less conveniently read files as bit for bit binary buffers.
Timing and asynchronous operations. Events, timers, network requests are all asynchronous and separate from each other and exist both in Node and in the browser. You have to be able to understand how to work with callbacks or promises.
Accessibility. The interactions imposed by JavaScript can present accessibility barriers. A serious JavaScript developer is already familiar with WCAG 2.0 and knows how to work within its recommendations or when to push back on violating business requirements.
Security. You need to have at least a basic understanding of security violations, security controls, and privacy. You don't need to be a CISSP, but you need to be able to supply recommendations and avoid obvious failures. If you cannot get this right in the most basic sense you aren't a serious developer.
Data structures. You need to understand how to organize data in a way that allows the fastest possible execution without compromising maintenance. This is something that is learned through academic study and repeated experience writing applications.
Presentation and semantics. You really need to have a basic understanding how to properly organize the content your users will consume and how to present in a consumable way efficiently. This is something almost completely learned from experience only. You might think CSS and HTML are simple skills that can be picked up when needed, but you would be absolutely wrong.
Knowing when to avoid the bullshit. Many developers lack the years of experience to be confident in their performance.... so some of these developers will try to fake it. Don't be an imposter, because everybody will see straight through it. Hoping mountains of abstractions, tooling, frameworks, compilers, and other bullshit will save you just bogs down your application and screws over your teammates. If you aren't confident then be honest about that and seek mentorship or get involved with open source software outside of work.

Source

Writing a JavaScript File

JavaScript must be saved to a file ending in the ".js" extension.

To add the JS file to your website, you must use a <script> tag in your HTML file:
<script src="filename.js"></script>

NOTE: Use double slashes "//" to make unexecuted Comments within your JS file (similar to comments that can be included in HTML and CSS).

The JavaScript Console

Accessible on the "Console" tab in "Developer Tools" in Chrome (accessed by F12).

Just as with using the Developer Tools for testing and understanding how your HTML/CSS work (rather than actually writing your HTML/CSS), the JS console serves the same function.

TIP: Pressing the "up" arrow in the console will bring back previously lines of code, so you do not have to retype it.

Primitives

There are 5 low-level, basic types of data used in JS:

Numbers

Whole, fractional, or negative numbers are all treated the same way.

In the console, the browser can perform mathematical processes in the same manner as a calculator by simply typing, e.g., "4 + 10" and pressing "Enter" to have the result returned to you.

One function known as Modulo (a.k.a., the Remainder Operator) uses the "%" placed between two numbers (like a "+" for addition), then it will divide the second number into the first number as many times as it can as a whole number, and then gives you the remainder as a result, e.g.:
10 % 3 = 1
20 % 5 = 0
15 % 11 = 4

Strings

All of the text within one pair of Quotation Marks constitutes one string. This is also true of numbers that appear within quotes.

You can use either double quotes ("), single quotes (') but the pair must match or an error will result.

IMPORTANT: If you want to have a string include Newlines (i.e., the character that causes a line break to occur when you press Enter), then you must use the Backtick. Other types of strings will remain on one line unless you use special escape characters (described below).

Backticks can also be used in conjunction with ${} to Embed Values within a string, e.g.:
Half of 100 is ${100/2}.
...translates to:
"Half of 100 is 50."

BUT NOTE: You can have a single quote within a pair of double quotes (e.g., if you are typing a word has an apostrophe), and it will still be valid.

Concatenation:

Strings can be added together formulaically to create a single string, e.g.:
'Charlie ' + 'Brown' = 'Charlie Brown'

Escape Characters:

Escape characters all start with a backslash (" "), and they are used to "escape" out of the string to write special characters that would not otherwise be valid within the string. For example, if you want the string to say, "She said "Goodbye!"" without using single quotes around "Goodbye!", then say:
'She said "Goodbye! "'

The following link includes a List of Special Escape Notations.

Length Property:

Every string has a "length property," which refers to the number of characters (including spaces, numbers, etc.) within that string. For example, by typing the following, the console will tell you that the string "hello" is 5 characters long:
'hello'.length;

You can also access individual characters by using Brackets, and placing a number (beginning with zero) within the brackets that corresponds to the position in the string in which the character appears (i.e., its "Index"). For example, JS will access the first letter in the string "hello" and return "h" if you say:
'hello'[0];

TIP: Rather than manually counting each character, you can determine the index number of the very last character by using ".length" and subtracting by 1.

NOTE: To determine if something is a number or a string, you can use: console.log(typeof var);

Booleans

Only two options: true or false

TIP: To invert the value of a variable from true to false or vice versa, simply use the NOT ("!") operator, e.g.:
var x = true; // x will return true
x = !x; // x will return false
x = !x; // x will return true

Null & Undefined

These are actually values rather than a true category (no multiple types of "null" or "undefined").

Undefined variables are those which are declared but not initialized, whereas null variables are "explicitly nothing."

For example, if you run "var age;" without a value, then JavaScript is simply told to make some space for something called "age" but without storing anything there. If you then ask the console to give you a return on "age", it will come back "undefined." If you ask the console to return something that doesn't exist at all, like "color," then it will return an error.

By contrast, if you are making a game and making a string for the name of the current player as "var currentPlayer = 'charlie';" and that player dies (game over), you would set "currentPlayer = null;" to make it clear that there is no longer any "current player."

Variables

A variable is simply a named container with data stored within. Variables are structured according to the following syntax:

var yourVariableName = yourValue; 
var name = 'Rusty'; 
var secretNumber = 73; 
var isAdorable = true;

NOTE: The naming convention used in JS relies on a system of capitalization known as camelCase, in which the first word of the name starts with a lower-case letter, and subsequent words begin with an upper-case letter.

The name "variable" means that the data stored within that container can vary. For instance, you can begin by setting the following in the console:
var name = 'Rusty';
However, if you later decide that you want to change the name, then you can simply state "name = 'Tater';" which will result in the console returning the value "Tater" when you simply type "name" into the console.

Math can also be performed with the name of a variable that has a number for its value. For example, if you set a variable with the name of "num" and set its value to 73, you can type "num + 7" to receive the result of 80.

Useful Built-In Methods

Alert

Creates a pop-up message for the user when running the following:
alert('hello world');

Console.log

"Prints" data to the JavaScript console (so only those viewing the console can see the text/data):
console.log('hello world');

Prompt

Allows the browser to get input from a user via a pop-up message with a text field in which the user can input information:
prompt('What is your name?');

The information obtained through Prompt can also be stored as a variable for later use. For example, the browser may run the following operation:
var userName = prompt('What is your name?');
Then after the user inputs his name, that name can be recalled by running "username".

NOTE: When a number is entered into a prompt by the user, it is stored as a string (e.g., 7 becomes "7"). To recall the stored string as a number, use the following syntax: Number(storedString);

If the prompt intends that the answer only be an answer and not contain any text, it would be most efficient to have the starting variable be something to the effect of:

var numberAnswer = Number(prompt('Enter a number.')); 
    or 
var answer = prompt('Enter a number.'); 
var numberAnswer = Number(answer);

ALSO NOTE: Alternatively, you may use the Unary Plus operator ("+") to convert a string to a number: +storedString;

Clear

Run "clear()" to clear the console.

Boolean Logic

Boolean logic relies upon Comparison Operators in determining whether a particular result should be labeled as "true" or "false". For example, assuming the value of "x = 5", then the following operators would produce the following results:

Double Equals performs Type Coercion, which takes the two numbers, strings, or variables and tries to turn them into a similar type to compare them. Triple Equals, by contrast, does not perform type coercion, so a pure number 5 will not be treated the same way as a string containing the number "5".

As a general rule, triple equals should always be preferred, as it is more specific than double equals. For example, if you were to run "var y = null;" and then "y == undefined", the console would return a value of "true" because null and undefined are similar, even though the two are not technically true equivalents.

Additional quirks in JS demonstrating the anomalies that arise when using double equals:

    true == "1" // true 
    0 == false // true 
    null == undefined  // true 
    NaN == NaN // false ("NaN" stands for "not a number")

Logical Operators

Logical operators are used to "chain together" expressions of Boolean logic. For example, where "x = 5", and "y = 9", you would receive the following results:

AND requires both sides of the equation to be true to return a result of "true." On the other hand, OR only requires one or the other to be true to return a result of "true."

NOT negates the truth (or falsity) of whatever is contained in its parentheses. In the example above, the parenthetical statement says that "5 = 9", which is false. Adding the NOT operator is tantamount to saying, "It is NOT TRUE that '5 = 9' is true," which is ultimately a true statement, thereby returning a result of "true."

The following values are treated as being "Falsy" in JS (whereas everything else is considered "Truthy"):
false (NOTE: This false is not within a string. Any text within a string is "truthy.")
0
""
null
undefined
NaN

Conditionals

Conditionals are the means by which you add "decisions" to your code. For example, when you log in to a website, there is code that checks the password you type in with the password stored on the site's server (and you are logged in if they match, and given an error message if they do not match).

Three Key Conditionals:

"If you are younger than 18, you cannot enter the venue":

    if (age < 18) { 
    console.log('Sorry, you are not old enough to enter the venue.'); 
    }

Else If always follows an "if" statement as a secondary condition, as it will only run if the preceding "if" statement is false.

"If you are between 18 and 21, you can enter but cannot drink":

else if (age < 21) { 
    console.log('You can enter, but cannot drink.'); 
}

Else will only run as a last-ditch effort when all preceding "if" and any subsequent "else if" statements are false.

"Otherwise, you can enter and drink":

else { 
    console.log('Come on in.  You can drink.'); 
}

Ternary Operator

The ternary operator is a shorthand method of creating a simple "if/else" conditional by the following syntax:
condition ? ifStatement : elseStatement

For example, to perform an age check, you could state:
age >= 18 ? console.log('You can enter.') : console.log('You must leave.');

Loops

While Loops repeat code while a condition is true. They are very similar to if statements, except they repeat a given code block instead of just running it once:

while (someCondition) { 
    // run some code 
}

For example, to have the console print numbers 1-5, you would say:

var count = 1; 
    while (count < 6) { 
    console.log(count); 
    count++; 
}

NOTE: Using "++" will add a value of 1, but you can add more value, for example, 4, by using "+= 4". For subtracting, just use a "-" sign instead of a "+" sign.

If you want the user to enter a certain phrase into a prompt, but do not need exact specificity (only that the user provide the phrase somewhere in the response to the prompt), then you can use the Index Of method. This method returns the first index (starting at 0) at which a given element can be found in the array (in this case, the user's response), or -1 if it is not present.

For example, if a prompt is set to loop until the user types "yes" (variable named "answer"), and the user instead types "hell yes", then running answer.indexOf('yes') will return a result of 5, because the phrase "yes" begins at index 5 of the user's answer of "hell yes". If the user typed "yes sir", then the result would be 0, because the phrase "yes" begins at index 0. If the user fails to include the phrase "yes" anywhere in his response, then a result of -1 will be returned, due to the fact that the phrase "yes" appears nowhere in the user's answer. Therefore, to make a prompt loop until the user types the word "yes" (and thereby returning a positive index to terminate the loop), the following expression may be used:

var answer = prompt('Are we there yet?');
while (answer.indexOf('yes') === -1) {
  var answer = prompt('Are we there yet?');
}
alert('Yay! We made it!');

The Return Keyword

Every function returns something, but if you don't tell it what to return, it just returns "undefined." In previous examples, functions have been used to print to the console, which is always an undefined return and cannot be used for anything. For example, in the "square()" function above, if you ran square(4), the console would print 16, but it would also return "undefined". Additionally, if you ran...
'4 squared is: ' + square(4);
...it would return: '4 squared is: undefined' rather than '4 squared is: 16'. That is because the return keyword was not used in the original function. Instead, you must state:

function square(num) { 
    return num * num; 
}

The use of the return keyword in this example also provides the additional benefit of allowing the returned result to be stored as a variable. For example, if you were to next run var result = square(104), then you would receive the returned value of 10816 after calling "result".

For another example of how the return keyword allows you to capture a returned value in a variable, consider this function which capitalizes the first character in a string:

function capitalize(str) { 
    return str.charAt(0).toUpperCase() + str.slice(1); 
}

This is a functioned named "capitalize" that takes an argument named "str", converts the first character (at index 0) of "str" to upper case, and then adds that first character to the beginning of the remaining letters in "str" beginning at the "slice" that starts at index 1 (the second character). If you run the following:

var city = "paris"; 
var capital = capitalize(city);

...then you would receive an output of "Paris" upon calling "capital", because the capitalize() function performed its return on the argument "str" (in the form of the substituted variable of "city").

IMPORTANT: Once a return keyword is triggered, it will STOP THE EXECUTION OF A FUNCTION. Therefore, if a function includes an if statement, such as:

function capitalize(str) { 
    if (typeof str === 'number') { 
    return "That's not a string." 
} 
    return str.charAt(0).toUpperCase() + str.slice(1); 
}

...if the user inputs a number rather than a word to the "str" argument, he will receive a return of "That's not a string.", and there will be no further execution of the second return statement.

Higher Order Functions are functions into which another function can be "Passed" as an argument. For example, JS includes a built-in function called setInterval(). Within the parentheses of this function, you first place the name of another function that you want setInterval() to run, and then follow that with the interval (in milliseconds) that the script should execute until terminated. Thus, if you want to have another function (which has already been previously set) run every second, you would state:
setInterval(anotherFunction, 1000);
Upon executing this statement, setInterval() will run anotherFunction() every 1000 milliseconds.

NOTE: When the example above is executed, it will return a number (e.g., 661) in the console. To stop the function from running, simply run clearInterval(661).

ALSO NOTE: If, in the above example, you want a function to run every second, but you don't want to name that function ahead of time, you can insert an Anonymous Function:

setInterval(function() { 
    // code that you want to run every second; 
}, 1000);

Scope

Scope refers to the context in which JavaScript is being executed (i.e., which properties and variables are "visible" within a particular function, yet are excluded by or different in another function). For example, if you declare the following function:

function getNumber() { 
    var x = 40; 
    console.log(x); 
}

...the console will print 40 if you call the function.  However, if you simply call "x", then the console will return an error saying "x" is undefined.  This is because the scope in which "x" exists in the function differs from the "Global" scope, where "x" does not exist.  Conversely, if you were to later define "x" as a variable with a value in the global scope, and then run the function, the function will still print 40 notwithstanding the value of "x" in the global scope.

HOWEVER: If you were to have set "var x = 40;" in the global scope, and then created the following:

function getNumber() { 
    console.log(x); 
}

...the Console will still print 40.  This is because when a variable is defined outside of a function, you still have access to it inside of that function AS LONG AS the interior of the function does not redefine that variable.  In other words, a more-specific "child" scope is governed by values set in the "parent" scope unless otherwise stated.  The converse, however, is not true, and the parent scope will not be governed by anything set in the child scope.

BUT NOTE: If the variable was set FIRST in the parent scope, then directly modified in the function, e.g.:

var x = 40; 
    function getNumber() { 
    x = 80; 
    console.log(x); 
}

...then simply calling "x" in the console will print a value of 80.  This is because the function is not declaring a "new" variable "x" within itself; rather, it recognized that there was already a variable "x" existing outside of itself and redefined that variable externally while incorporating the redefined value internally. HOWEVER, had the function stated "var  x = 80;", then the function would have created its own "x" as an internal variable, and calling "x" globally would print 40.

Arrays

Basics

Arrays are high-level data structures (ways of holding information using JS) containing lists of data. For example, rather than making four "friend" variables:

var friend1 = 'Mac'; 
var friend2 = 'Dennis'; 
var friend3 = 'Charlie'; 
var friend4 = 'Dee';

...you could use an array by making a comma-separated list, like so: 
`var friends = ['Mac', 'Dennis', 'Charlie', 'Dee'];`

Arrays are indexed starting at 0 (just like characters in a string). The index method is used to get data out of the array, e.g.:

console.log(friends[0])  // "Mac"
friends[1] + ' <3 ' + friends[2]  // "Dennis <3 Charlie"

Arrays are useful in that they can be updated by simply stating, for example:
friends[0] = 'Frank';
...and all lines of code that would have otherwise produced "Mac" now say "Frank".

Arrays are also useful in that new data can be added to them without modifying the original line of "var friends ..." Rather, you can simply assign a new value/string (or any other data, including "true," "null," or even other arrays) to the next available index, and it will be added to the array, e.g.:
friends[4] = 'Cricket';

To initialize an array without yet adding data to the array, you can simply state:
var friends = [ ];
...or...
var friends = new Array();

Arrays also have a length property that can be called by using ".length", e.g.:

var friends =  ['Frank', 'Dennis', 'Charlie', 'Dee', 'Cricket'];
    friends.length;  // returns 5 (because there are 5 friend values)

Arrays can be nested within arrays like so:

var friendGroups = [ 
    ['Friend 1', 'Friend 2'], 
    ['Friend A', 'Friend B'] 
    ];

NOTE: When arrays are nested, you can call a specific index within a nested array like so :
console.log(friendGroups[1][0]); // "Friend A" (takes the second // index of the first array, and the // first index of the nested array)

Built-In Array Methods

For a complete list of Array Methods, refer to the "Methods" section in the MDN link to "Arrays" above.

Five Important Methods:

Push/Pop

Use push() to add a value to the END of an array (rather than having to count or use "length" to figure out which index in the array you would have to manually add the value to), e.g.:

var colors = ['red', 'orange', 'yellow']; 
colors.push('green');  // ['red', 'orange', 'yellow', 'green']

If you were to then state "colors.pop();", then "green" would be removed, because pop() removes the last item in an array.

NOTE: When pop() is used, the console actually returns the removed variable. Because a value is returned, that means it can be stored as a variable if so stated:
var removedColor = colors.pop(); // stores "green"

Unshift/Shift

unshift() and shift() operate in the same way as push() and pop(), except that they add/remove values to the BEGINNING of an array.

NOTE: While counterintuitive, remember that unshift() is used to ADD, not to remove.

indexOf

indexOf() takes an argument and tries to find that argument in a given array. If it finds it, then it will return the FIRST index of where it's found in the array, e.g.:

var friends =  ['Frank', 'Dennis', 'Charlie', 'Dee', 'Cricket']; 
friends.indexOf('Dennis');  // 1

NOTE: Remember that indexOf() will only return the FIRST index, so if the same argument appears elsewhere in the array, that index will not be returned.

ALSO: If an argument is NOT present, "-1" will be returned.

Slice

slice() is used to copy different portions of an array, e.g.:

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; 
var citrus = fruits.slice(1, 3); 
    ...leads to... 
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; 
var citrus = ['Orange', 'Lemon'];

NOTE: The first number in slice argument signifies the first index that will be copied ("Orange"), and the second number represents where the slice will end AND IS NON-INCLUSIVE ("Apple"). Thus, only "Orange" and "Lemon" are copied out.

TIP: If you want to Duplicate an entire array, simply omit the numbers in the slice argument, and all data in the array will be copied over.

Splice

splice() changes the contents of an array by removing and/or adding elements at any point in the index.

To Remove an element, use this syntax:

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; 
fruits.splice(1, 2); 
    ...leads to... 
var fruits = ['Banana', 'Apple', 'Mango'];

The splice syntax works by using the first number as the index number at which to start changing the array (in this case, index 1, which is "Orange"). The second number is the Delete Count, which can be 0 (to not delete the starting index) or any other positive number to indicate how many indices (beginning from your starting index) are to be deleted (in this case, delete two indices starting with index 1, which means deleting indices 1 and 2, i.e., "Orange" and "Lemon").

To Add an element, use this syntax:

var fruits = ['Banana', 'Apple', 'Mango']; 
fruits.splice(1, 0, 'Orange', 'Lemon'); 
    ...leads to... 
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];

In this case, splice() is told to:
(1) look at index 1 (starting as "Apple"),
(2) abstain from deleting the element at index 1,
(3) insert "Orange" as the new index 1, and
(4) insert "Lemon" after "Orange" (this addition process can be repeated indefinitely and will ensure that "Mango" remains as the last index).

Array Iteration is the process in which a code will run through every element in an array, rather than just one element. For example, message board comments are stored in an array, and they are only displayed when some code runs through that array and creates HTML content for each comment stored in the array.

For Each Iteration (newer method):

var colors = ['red', 'orange', 'yellow', 'green']; 
colors.forEach(function(color) {  // "color" is a placeholder to represent a console.log(color);  // singular instance of any given element in });  // the collection; call it whatever you want

Essentially, the "color" placeholder argument merely represents the value of every element in the array. Thus, the code is calling the console.log() function "for each" element, and then passing in each element's value.

Alternatively, you could set a function beforehand, and then run it through forEach():

var colors = ['red', 'orange', 'yellow', 'green']; 
function printColors(color) { 
  console.log(color); 
} 
colors.forEach(printColors);

IMPORTANT: forEach() executes a callback function once for each element in the array in ascending order. The callback function is expected to have AT LEAST 1 (BUT UP TO 3) ARGUMENTS separated by commas). The first argument represents the Element in the array. The second argument represents the Index of said element. The third argument represents the Array that forEach() was called on (which will be the same for every iteration of the loop). Thus, if you want to print both the contents of a list along with its index number, you would state:

var colors = ['red', 'orange', 'yellow', 'green']; 
function printColors(x, i) { 
   console.log(i + ': ' + x); 
} 
colors.forEach(printColors);

...which would yield: 
0: red 
1: orange 
2: yellow 
3: green

Article: Asynchronous JS: Working with try/catch and promises

For Loop Iteration (older method):

var colors = ['red', 'orange', 'yellow', 'green']; 
    for (var i = 0; i < colors.length; i++) { 
    console.log(colors[i]); 
}

The above code will start by printing index 0 of "colors" to the console, and repeat the process until reaching index 3. This is possible because the length of "colors" is 4, and the final index value is 3. As the final index in an array will always be one digit smaller than the length of the array, this loop will necessarily run until all array values are printed.

Objects

Basics

An object, like an array, is a collection of related data (of any type) and/or functionality. Unlike an array, objects are meant to handle data that does not follow a logical and progressive order. Objects have no built-in order. Objects use the following Syntax (Key-Value Pairs where the "key" (name) is separated from the value by a colon, and all key-value pairs are separated by commas):

var objectName = { 
member1Name: member1Value,
member2Name: member2Value,
member3Name: member3Value
};

Retrieving Data from an object is done by either Bracket or Dot Notation:

var dog = { 
    name: 'Rusty', 
    breed: 'Mutt', 
    age: 3 
};

...bracket notation: 
`console.log(dog['name']);  // "Rusty"` 
...dot notation: 
`console.log(dog.name);  // "Rusty"`

Usage Notes:

You CANNOT use dot notation if the property starts with a number:

someObject.1blah  // invalid 
someObject['1blah']  // valid

You CANNOT use dot notation if the property name has a space in it (not a good practice anyway):

someObject.fav color  // invalid 
someObject['fav color']  // valid

You CAN look up things using a variable when using bracket notation:

var str =  'name'; 
someObject.str  // doesn't look for "name" 
someObject[str]  // evaluates str and looks for "name"

Updating Data in an object is done just like an array (access a property and reassign it):

objectName['propertyName'] = newPropertyValue; 
    ...or... 
objectName.propertyName = newPropertyValue;

Creating Objects can be done in one of three ways:

Make an empty object and then add to it:

var person = {}; 
person.name = 'Travis'; 
person.age = 21; 
person.city = 'LA';

Make an object by executing a built-in function and then add to it:

var person = new Object(); 
person.name = 'Travis'; 
person.age = 21; 
person.city = 'LA';

Make an object all at once:

var person = { 
    name: 'Travis', 
    age: 21, 
    city: 'LA' 
};

Objects can be inserted within arrays, so that each item within an array is its own object. This is typical when working with an online array of comments, posts, friends, etc.:

var posts = [ 
    { 
    title: 'Article 1', 
    author: 'Author 1', 
    comments: ['Awesome post.', 'Terrible post.'] 
    }, 
    { 
    title: 'Article 2', 
    author: 'Author 2', 
    comments: ['I love this.', 'I hate this.'] 
    } 
];

To access the title of the first post, you would state:
posts[0].title

To access the second comment of the second post, you would state: posts[1].comments[1]

Adding Methods to Objects

A "method" (e.g., alert(), prompt(), indexOf(), etc.) is a function that is a property inside of an object. console.log() is an example of a method that has been added to an object. "console" is a built-in object with "log()" as a built-in function. By putting the two together (console.log), you are having JS look at the "console" object and run its "log()" function.

Adding methods to objects (rather than having them stand alone) is useful for grouping things together logically to avoid a "Namespace Collision." For example, to have a function return "WOOF" when a "dog" object "speaks," but have it return "MEOW" when a "cat" object speaks," you would state:

var pets = [ 
    { 
    type: 'dog', 
    speak: function() { 
      return 'WOOF'; 
    } 
    }, 
    { 
    type: 'cat', 
    speak: function() { 
      return 'MEOW'; 
    } 
    } 
];

...so that pets[0].speak() will return "WOOF", and pets[1].speak() will return "MEOW".

This

The "this" keyword behaves differently depending on the context. The following example illustrates how "this" behaves when used in methods that have been added to an object.

Suppose you're making an app that has some comments, and you want to have some comment data stored in an object:

var comments = {
  data: [
     'Good', 
     'Bad', 
     'Okay' 
  ]
};

Now suppose you want to make a method called "print()" and add it to "comments". You could define a separate function, and then "print" the data by running "print(comments.data)":

function print(arr) {
  arr.forEach(function(elem) {
  console.log(elem)
  });  
} 
print(comments.data);  // "Good,Bad,Okay"

But if you want to add the print function to the comments object, you can use "this" to refer to the data that is contained in the same object (i.e., "this" object):

var comments = {
  data: [
  'Good', 
  'Bad',   
  'Okay'
  ],
print: function() {
  this.data.forEach(function(elem) {
    console.log(elem)
  });  
  }
};

The "this" keyword essentially allows you to use the values contained in comments.data inside of comments.print without the need for any additional argument. Thus, by writing "this" inside of a method, it refers to the object that the method is defined in.

⬆ Back to Top

DOM ("Document Object Model") Manipulation

Background

The DOM is the interface between JS and HTML/CSS (for making content interactive). When you load an HTML page, the browser turns every HTML tag into a JS object that we can select and manipulate, and all of these are stored inside of a "document" object. To view the HTML elements converted into JS objects (i.e., the DOM), type the following into the console: console.dir(document);

NOTE: When performing DOM manipulation, be sure that the JS files are loaded after all HTML is written (or else you will be trying to manipulate HTML that does not yet exist to the JS files, and it will not work.)

Important DOM Selector Methods (the following five methods have been added into the "document" object):

document.getElementById()

Takes in an ID name and returns the one element that matches that name (because an ID can only be associated with one element in a page). For example, if you have an HTML element with the ID of "highlight", you can return that element by stating:
var tag = document.getElementById('highlight');

You can then use console.dir(tag) to see all of the properties contained in the "highlight" object.

document.getElementsByClassName()

Operates in the same way as getElementById(), but applies to all elements sharing the same class. If you want to return a list of all elements with the class "bolded", you would state:
var tags = document.getElementsByClassName('bolded');

You can then simply state "tags" to see all of the properties for all "bolded" objects, and you can use console.log(tags[0]) to access the first index of the Node List (not technically an array, but is array-like) containing the "bolded" objects.

The node list is "array-like" in the sense that you can access individual indices, but you CANNOT apply forEach() to it (because there is no forEach() function defined for these node lists; they are defined for arrays).

BUT NOTE: You can use the "Array.from()" method to convert node lists and HTML collections into arrays.

NOTE: You can also access a specific index (e.g., the first index) more directly by simply stating:
var tags = document.getElementsByClassName('bolded')[0];

document.getElementsByTagName()

Operates in the same way as the two above, but it refers to a general HTML tag (such as <li>, <ul>, <h1>, <head>, <body>) rather than a specific class/ID. If you want to return a list of all elements with the

tag, state: var tags = document.getElementsByTagName('li');

document.querySelector()

Operates in the same fashion as the methods above, but does so by using a CSS-Style Selector (i.e., "#" for ID, and "." for class). BUT, it differs significantly by only returning the FIRST MATCH. For example, to if you want to return an HTML element with the ID of "highlight", you would state:
var tag = document.querySelector('#highlight');

If "highlight" were a class, you would use a period instead of an octothorp, but note that you will only return the first match.

This works for any syntax that would be valid in CSS, e.g.:
var tags = document.querySelector('li a.special');

query.Selector can also take in basic HTML tag names like <h1>:
var tag = document.querySelector('h2');
...but, again, only for the first match.

If you want to select a Specific Type of element (e.g., a numerical input), you would use brackets and state:
var tag = document.querySelector('input[type="number"]');

document.querySelectorAll()

Operates in the same manner as query.Selector, except it returns a node list of ALL elements (as objects) that match a given CSS-style selector.

Manipulating Style

A DOM object's Style property is one way to manipulate an HTML element's style, e.g.:

// select your object: 
var tag = document.getElementById('highlight'); 
// manipulate your object: 
tag.style.color = 'blue'; 
tag.style.border = '10px solid red'; 
tag.style.fontSize = '70px'; 
tag.style.background = 'yellow'; 
tag.style.marginTop = '200px';

NOTE: This is not actually the best way to manipulate an object, as it is very repetitious (not "dry" code), but more significant is the "Separation of Concerns" (the principle that HTML, CSS, and JS should each be responsible for their own separate domain, and crossover between the three should be avoided -- HTML should be pure structure, CSS should be pure presentation, and JS should be pure behavior).

Rather than changing multiple style properties in JS, you should turn them on/off by using the CSS file. For example, you can define a CSS class, select an element in JS, and add the class to its classList:

// define a class in CSS: 
.toggleWarning { 
    color: red; 
    border: 10px solid red; 
}

// add the .toggleWarning class to a select object in JS: 
var tag = document.getElementsByTagName('h1'); 
tag.classList.add('toggleWarning');

If you so choose, you can later remove the class by stating:
tag.classList.remove('toggleWarning');

A similar useful method is toggle, which operates by (1) adding the specified class if it is not present in the class list, and (2) removing the specified class if it is present in the class list:
tag.classList.toggle('toggleWarning');

NOTE: A class list is technically NOT AN ARRAY. This is why you must use add() and remove() rather than push() and pop().

Manipulating Text and Content

The textContent property retrieves the text inside of an HTML element. "Text" is defined as anything between the HTML tags but not including any tags contained within (it extracts only Plain Text). The method can be used to alter the text by the following syntax:
tag.textContent = 'blah blah blah';

NOTE: Because this method only works in plain text, no modifiers like <strong> or <em> will be preserved.

The innerHTML property is used to manipulate both HTML Text and Inner Elements.

IMPORTANT SYNTAX NOTE: When manipulating text and content (or style), it is not necessary to set a variable first. Instead, you can simply add the textContent or innerHTML property after the selector method, e.g.:
document.querySelector('h1').textContent = 'Heading 1';

Manipulating Attributes

The attributes of an HTML element (e.g., href, src, or anything else following the name="text" syntax, such as id, class, etc.) can be modified by using getAttribute() and setAttribute() to read and write attributes. For example, to return the URL for the following:
<a href="https://www.google.com/">Search</a>
...you would state:
var link = document.querySelector('a'); link.getAttribute('href');
...and to modify the link, you would state the attribute as the first argument in the method, and the new URL as the second argument:
link.setAttribute('href', 'https://www.yahoo.com/');

NOTE: When manipulating Images, the "src" attribute may be ignored if the "srcset" attribute has also been set. In such cases, srcset must be modified.

DOM Events

The MDN Event Reference contains all of the different events that are recognized by the DOM application programming interface (API). Some common events to be most familiar with are "click", "change", "mouseover", and "mouseout".

Events trigger the running of code when a certain action has been taken, as opposed to automatically executing when the page loads (e.g., clicking a button, hovering over a link, pressing a key, etc.). The event must be selected and then attached to a specific element by means of an Event Listener (e.g., "Listen for a click on this <button>." To add a listener, use the addEventListener method through this syntax:
element.addEventListener('type', functionToCall);

For example, to have a message print to console when the first button in a document is clicked, you would state:

var button = document.querySelector('button');  // select element 
button.addEventListener('click', function() {  // add event listener 
    console.log('The button has been clicked.');  // run code 
});

It is not necessary to use an anonymous function. The same code could be executed as follows:

var button = document.querySelector('button'); 
button.addEventListener('click', printConsole); 
function printConsole() { 
    console.log('The button has been clicked.'); 
}

However, unless there is a need to use a named function again somewhere else outside of the click listener, it is better to simply use the anonymous function.

NOTE: You can have more than one listener on a given element. They will execute in the order that they were added.

THIS NOTE: Inside of a listener, the "this" keyword refers to the item that was clicked on (or hovered upon, or which a keypress referred to, etc.). So whatever element is attached to the addEventListener is the event to which "this" refers. This is useful in situations where you want a large number of similar but individual (sibling) elements to run specific code only upon itself when activated. For example, if you have a <ul> with a dozen <li> tags within, and you want each individual <li> to change its color when clicked, you can use a for loop and "this" as follows:

var lis = document.querySelectorAll('li'); 
for (var i = 0; i < lis.length; i++) { 
    lis[i].addEventListener('click', function() { 
      this.style.color = 'pink'; 
    }); 
}

⬆ Back to Top

JS Advanced

This

"This" is a reserved keyword, which means it cannot be set as the value of any variable. The value of "this" is determined upon execution (i.e., "Execution Context").
There are Four Rules governing how the value of "this" is determined:

Global Context

This rule applies when you see "this" applied outside of a declared object. When you see the word "this" in the global context, its value refers to the Global Object, which is the Window in the browser environment. Thus, if you were to console.log(this), you would return "window".
In essence, every variable that you declare in the global context is in fact attached to the window object, which is what allows "this" to work in the global context without an object being declared. For example, you can create the following variable:
var person = 'Ellie';
…which can then be accessed as:
window.person
…and which is also synonymous with:
this.person
NOTE: Even when you use "this" inside of a Function, its value is still the global object if no other object is declared within the function, e.g.:

function variablesInThis() {
    this.person = 'Ellie';  // still the same as var person = 'Ellie'
}

HOWEVER: The above process is considered bad practice for setting global variables, as global variables should be declared at the top of your code (with the value either declared immediately or at a later time within a function). If you want to prevent the accidental creation of global variables in a function, you can state "use strict" (in quotes) at the top of your JS file, which will return a TypeError indicating that "this" is Undefined upon execution.

Object/Implicit

When "this" is found inside of a Declared Object, its value will always be the Closest Parent Object. For example, given the following object…

var person = {
    firstName: 'Ellie',
    sayHi: function() {
        return 'Hi ' + this.firstName;
    }
}

…executing "person.sayHi()" will return "Hi Ellie" because "this.firstName" is equivalent to stating "person.firstName" due to "person" being the closest parent object to "this".
NOTE: Caution must be exercised with Nested Objects, as a reference to properties beyond the scope of the nested object may result in undefined values being returned when using "this" within the nested object.

Explicit

In order to avoid problems associated with nested objects, you can set the context of "this" by using the Call, Apply, or Bind methods (which can only be used by Functions, and not by any other data type).
Call uses the following syntax:
function.call(thisArg, arg1, arg2, …);
The first argument is whatever object you want the value of "this" to be. The subsequent arguments are for any optional parameters to be used in the function in which you are changing the context of "this".
NOTE: When the call method is used on a function, that function is immediately invoked.
Consider the following example:

var firstPerson = {
    firstName: 'John',
    lastName: 'Doe',
    fullName: function() {
            return this.firstName + ' ' + this.lastName;
    }
}

var secondPerson = {
    firstName: 'Mary',
    lastName: 'Jane'
}

If you want to return the full name of Mary Jane, there is no need to duplicate the fullName function from the first person (John Doe). Rather, you need merely state…
firstPerson.fullName.call(secondPerson);
…because using the "secondPerson" argument in call will result in the "this" keyword from the "firstPerson" object actually being applied to the "secondPerson" object instead (i.e., Mary Jane).
Apply uses the following syntax:
function.apply(thisArg, [argsArray]);
Apply is almost identical to call except it only takes two arguments. The first argument operates the same as call, while the second is an Array (or ARRAY-LIKE OBJECT) that will be passed to the function in which you are changing the value of "this".
NOTE: When the apply method is used on a function, that function is immediately invoked.
Consider the following example:

var firstP = {
    name: 'John',
    addNumbers: function(a, b, c, d) {
       return this.name + ' calculated ' + (a+b+c+d);
      }
}

var secondP = {
    name: 'Jane'
}

Stating "firstP.addNumbers(1, 2, 3, 4)" will return "John calculated 10". You can do the same for Jane by either using call:
firstP.addNumbers.call(secondP, 1, 2, 3, 4);
…or by using apply:
firstP.addNumbers.apply(second, [1, 2, 3, 4]);
Bind uses the following syntax:
function.bind(thisArg, arg1, arg2, …);
Bind is almost identical to call except that instead of invoking the function immediately, bind returns a function definition. This allows you to save a function with different values of "this" and invoke them at a later time (known as Partial Application), as you may not initially know all of the arguments that will be passed to a function.

In the example for apply above, you might know that you always want to add 1 and 2 for the second person, but not know what other numbers will need to be calculated. You could first state:
var sPCalc = firstP.addNumbers.bind(secondP, 1, 2);
…and then include more numbers on execution:
sPCalc(3, 4) // returns "Jane calculated 10"
Bind is also important when working with asynchronous code (e.g., setTimeout), as it allows you to set the context of "this" for a function to be called at a later point in time. Consider the following:

var person = {
    name: 'John',
    sayHi: function() {
        setTimeout(function() {
            console.log('Hi ' + this.name)
        }, 1000);
    }
}

Although you may expect "Hi John" to be displayed in the console after 1 second, this does not occur. This is because setTimeout() does not run console.log() concurrently with the creation of the "person" variable; rather, it only executes after the timer expires. As a result, setTimeout() is run in the Global Context as a Window Object. Thus, "this" actually refers to window rather than "person", because window is the value of "this" upon execution. You can fix this by stating:

var person = {
    name: 'John',
    sayHi: function() {
        setTimeout(function() {
            console.log('Hi ' + this.name)
        }.bind(this), 1000);
    }
}

This may appear to be confusing, as you are using "this" to change the value of "this". However, at the time "person" is CREATED, "this" does in fact refer to "person" because "person" (not window.setTimeout) is the nearest parent object to "bind(this)". Here, "bind(this)" is equivalent to "bind(person)".
Article: Asynchronous JS: Finally discover how to use SetTimeout and SetInterval

New

The new operator is used together with a Constructor Function to create a new object. Inside the constructor function definition, the keyword "this" refers to the object that is created. When the new operator is used, an implicit return "this" is added to the constructor function.
NOTE: A popular convention in JS is to capitalize the names of Constructors, which basically operate as model templates upon which new objects will be based.
For example, you can create a constructor function for a person's name:

function Person(first, last) {
    this.firstName = first;
    this.lastName = last;
}

In this context, "this" would apply to window in the global context (as there is no object has been declared). However, when paired with the new operator, "this" will instead refer to the newly created object that has been stored as a variable. For example…
var john = new Person('John', 'Doe');
…results in "this.firstName" being equal to "john.firstName" (as "john" is the new object) and "this.lastName" being equal to "john.lastName".

Object-Oriented Programming ("OOP")

About

OOP is a programming model that uses blueprints to create objects. Such blueprints are conventionally called Classes, and the created objects are called Instances. The goal is to make classes modular so they can be reused and shared among all parts of an application. JS does not have "built-in" classes in version ES5, but they can be implemented via constructor functions and objects.
New Operator
As noted in the "this" section above, the new operator is used together with a constructor function to create a new object. The new operator works by:
(1) creating an empty object;
(2) setting the keyword "this" to be that empty object;
(3) adding an implicit "return this" line to the end of the function; and
(4) adding a property onto the empty object called "proto" (a.k.a., "Dunder Proto", which links the created object to the prototype property on the constructor function.
Multiple Constructors
When working with multiple constructors, you can make use of "this" and call to optimize your code, e.g.:

function Dog(name, age) {
    this.name = name;
    this.age = age;
    this.bark = function() {
        console.log(this.name + ' just barked!');
    }
}
function Cat(name, age) {
    Dog.call(this, name, age);
    this.meow = function() {
        console.log(this.name + ' just meowed!');
    }
}

NOTE: It may be confusing to see that "this" is used as the first argument in Dog.call() of Cat() to redefine "this" as used in Dog(). However, remember that the constructor will be used with the new operator. This means that, when new is applied to Cat(), a NEW OBJECT will be created in which all "this" keywords in Cat() will refer to the new cat object (to which "this" will now apply because the cat is the closest parent object). Thus, you can use "this" as the first argument in Dog.call() to redefine all "this" keywords in Dog() to refer to the newly created Cat() object.
For further optimization, you can use "this" and apply together with a built-in JS object called "arguments", which is an array-like object corresponding to the arguments passed to a function. As "arguments" is an array-like object, it can be used with apply as a shorthand, e.g.:

function Cat(name, age) {
    Dog.apply(this, arguments);
    this.meow = function() {
        console.log(this.name + ' just meowed!');
    }
}

Prototypes

Basics

Prototypes are the mechanism by which JS objects inherit features from one another. Upon creation, all constructors possess a prototype property, which is an object that can have properties and methods attached to it. The prototype property has two properties: (1) "constructor", which relates back to the definition of the constructor itself; and (2) "proto", which allows properties or methods of the prototype to be accessed by any object created from the constructor.
NOTE: The "proto" property of a created object is identical to the prototype property of the constructor. Thus, if you created an object from a Cat() constructor, the following would be true:
catObject.proto === Cat.prototype

Prototype Chain

If you want to add a property or method to all objects that will be (or, more significantly, already have been) created by a constructor, you need only add that property/method to the prototype of the constructor. For example, you have already created two cats (named "button" and "kiwi") from a Cat() constructor, and the only properties in the constructor are "name" and "age". However, you now want to add a property called "isMammal", which is to be set as "true" for all cats. You can state…
Cat.prototype.isMammal = true;
…which then results in the following statements returning true:
button.isMammal; // true
kiwi.isMammal; // true
In the example above, if you were to access "button" to view its properties and methods, you would not immediately see "isMammal" as a property directly under "button" as you would with "name" and "age". Rather, you would have to access the "proto" property under "button" to see "isMammal". Nevertheless, you are still able to access "button.isMammal" without saying "button.proto.isMammal". This is because JS follows the prototype chain (by following a line of "proto" properties) to locate an object's properties or methods.

The chain here works as follows:
(1) If the requested property/method is not found directly in the cat object, check the cat's "proto".
(2) If the cat's "proto" (which itself an object constructed by JS's built-in Object() constructor) does not contain the property/method, then refer to the Object() constructor's "proto" nested under the cat's "proto".
(3) If the Object() constructor's "proto" does not contain the property/method, then the result is "undefined" and the inquiry goes no further, as the Object() constructor is the last link in the chain.
NOTE: This manner in which JS finds methods can be applied to all created objects. For example, all arrays are created by JS's built-in Array() constructor, which contains a prototype object to which the "push" method (among others) is attached. If you create an array named "cats" and you want to push a new cat into the array, you are able to say "cats.push('Stumpy')" rather than "cats.proto.push('Stumpy')" due to prototype chaining.
The prototype chain allows for further Code Optimization. For example, if you have a Dog() constructor and you want to apply a bark() method to each dog created by Dog(), you would have a lot of repetitive code if you inserted the bark() method directly into the Dog() constructor, as the bark() method would be repeated in every created dog object with the exact same value each time. But by taking advantage of the linking capabilities of the prototype chain, you could simply state:

function Dog(name, age) {
    this.name = name;
    this.age = age;
}
Dog.prototype.bark = function() {
    console.log(this.name + ' just barked!');
}

Closures

About

A closure is a function that makes use of variables defined in outer functions that have previously returned. Consider the following example:

function outerFunc() {
    var outerData = 'closures are ';
    return function innerFunc() {
        var innerData = 'awesome';
        return outerData + innerData;
    }
}

In this example above, if you were to simply call outerFunc(), you would only return the definition of the inner function, which would appear as:

function innerFunc() {
    var innerData = 'awesome';
    return outerData + innerData;
}

However, as the result of outerFunc() is itself a function, this gives you the ability to call innerFunc() immediately upon calling outerFunc() by simply stating outerFunc()(), which returns, "closures are awesome". Because innerFunc() makes use of the returned outerData variable defined in outerFunc(), that makes innerFunc() a closure.
NOTE: If an inner function does not make use of any returned external variables, then it is merely a Nested Function.
NOTE: When working with closures, you may either call the inner function right away (via "yourFunc()()"), or you can store the result of the outer function to be used by the inner function at a later time (similar to how bind() works), e.g.:

function outer(a) {
    return function inner(b) {
        return a + b;
    }
}
var storeOuter = outer(5);
storeOuter(10)  // returns 15

Usage

Closures are useful for creating Private Variables, which are variables that cannot be modified externally.
Consider the following example:

function counter() {
    var count = 0;
    return function() {
        return ++count; // Pre-Increment
    }
}

If you were to call counter()() repeatedly, you would return "1" each time, without the count ever going up. This is because there is no "container" to keep track of the incremented count variable that exists only within the counter() function. However, if you were to save counter() to a new variable in the global scope:
var counter1 = counter();
…then there is now a persistent variable (i.e., counter1) to "house" the increments to "count" within counter1's own counter() function.
The primary benefit of using closures in this way is that it is no longer possible for the value of count within counter1 to be externally modified by any other function. Thus, you are free to repeat this process with a new variable named "counter2", which, in turn, will have its own internal count variable insulated from any external modification. Neither will have their count value increase except through their own internal operations.
Consider the following for another more "practical" example:

function classroom() {
    var instructors = ['Adam', 'Ben'];
    return {
        getInstructors: function() {
            return instructors;
        },
        addInstructors: function(instructor) {
            instructors.push(instructor);
            return instructors;
        }
    }
}

Essentially, the classroom() function operates as a model template upon which new "course" objects can be created, and in which all courses will have Adam and Ben as instructors. You can create two courses as variables (e.g., "course1" and "course2"), and you can add an instructor to course 1: course1.addInstructor('Charlie'); // ['Adam', 'Ben', 'Charlie']
…but this addition will not be reflected in course2:
course2.getInstructors(); // ['Adam', 'Ben']

⬆ Back to Top

Our Articles:

HTML

Article No Longer Available

4 Non-Popular HTML Tags 💻

Garvit Motwani for World In Dev ・ Apr 13 '21

#html #webdev #beginners #css

CSS

Article No Longer Available

5 CSS Tricks & Tips That You Should Know 🚀 + Giveaway

Garvit Motwani for World In Dev ・ Apr 20 '21

#css #webdev #html #beginners

Javascript

400+ JavaScript Interview Questions 🎓 With Answers 🌠

Lorenzo for World In Dev ・ Apr 27 '21

#javascript #webdev #productivity #beginners

250+ JS Resources to Master Programming 💥 Cheat Sheet

Lorenzo for World In Dev ・ Apr 20 '21

Projects ideas to become a javascript master 🚀 Resource compilation 💥 + Giveaway⚡

Lorenzo for World In Dev ・ Apr 10 '21

#javascript #webdev #programming #beginners

Article No Longer Available

400+ JavaScript Interview Questions 🎓 With Answers 🌠

Lorenzo for World In Dev ・ Apr 27 '21

#javascript #webdev #html #es6

Article No Longer Available

8 JavaScript Tips & Tricks That No One Teaches 🚀

Garvit Motwani for World In Dev ・ Apr 6 '21

ES6 Cheatsheet 🔥 - All You Need 🚀

Garvit Motwani for World In Dev ・ Apr 29 '21

5 Array Methods You Should Know 🚀

Garvit Motwani ・ Apr 27 '21

#javascript #webdev #beginners #html

10 New JavaScript Features in ES2020 That You Should Know

Garvit Motwani for World In Dev ・ Mar 30 '21

Others

The ultimate Cheat sheets compilation (200+) - 🔥🎁 / Roadmap to dev 🚀

Lorenzo for World In Dev ・ Mar 2 '21

Finally - How to understand math - Awesome resource list 🚀

Lorenzo for World In Dev ・ Mar 30 '21

Article No Longer Available

Top Google Chrome Extensions For Devs 🔥🚀

Lorenzo for World In Dev ・ Mar 7 '21

#showdev #productivity #career #webdev

Article No Longer Available

Backend

Basics
Command Line
Node JS
EJS
RESTful
Databases
Authentication
Git
Deployment

Conversion to Markdown In Progress --> Available before others here for now.

⬆ Back to Top

Hope you appreciate it, and Thanks for reading!

PS: Big Thank Bronson for writing this ❤

250+ JS Resources to Master Programming 💥 Cheat Sheet

Lorenzo — Tue, 20 Apr 2021 13:30:49 +0000

Hello World! I felt bored after completing the Ultimate Cheat Sheet Compilation, so I just decided to create another one! The most complete javascript cheat sheet and resource compilation you can find online!

🔖 - Waaait, don't leave this page without bookmarking it!!

Read also:

400+ JavaScript Interview Questions 🎓 With Answers 🌠

Lorenzo for World In Dev ・ Apr 27 '21

JavaScript Variables - w3schools

⚡ Giveaway ⚡
We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important

PS: It took me around 10 hours to complete the article - So please remember the like ❤️ and super like 🦄

Table of content

My cheat Sheet
Projects ideas to become a javascript master
Other resources
1. Complete Javascript cheat sheets
2. JS promises
3. JS Arrays
4. JS loops
5. Preprocessor
6. CoffeScript
7. EJS
8. Babel
9. JS Frameworks & Libraries
10. Angular
11. Vue
12. React
13. JQuery
14. Others
15. Node
16. Other resources
Remember the like ❤️ and maybe super like🦄

For beginners

What is JS (Javascript)

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies. MDN

What it used for?

To put things simply, JavaScript is an object orient programming language designed to make web development easier and more attractive. In most cases, JavaScript is used to create responsive, interactive elements for web pages, enhancing the user experience. Things like menus, animations, video players, interactive maps, and even simple in-browser games can be created quickly and easily with JavaScript. JavaScript is one of the most popular programming languages in the world. BitDegree - What Is JavaScript Used For And Why You Should Learn It

Hello World In Javascript:

alert("Hello World") — Output data in an alert box in the browser window
confirm("Hello World") — Opens up a yes/no dialog and returns true/false depending on user click
console.log("Hello World") — Writes information to the browser console, good for debugging purposes
document.write("Hello World") — Write directly to the HTML document
prompt("Remember the like!") — Creates a dialogue for user input

Resources to learn it:

At Reddit - What 10 Things Should a Serious Javascript Developer Know Right Now?

Scope. If you don't understand this intimately then you aren't that serious about this language. This is the number one point intentionally and I cannot stress it enough.
Architecture. You don't have to be a master software architect, but if you cannot perform some basic planning and put pieces together without massive layers of tooling you are an imposter. Expecting frameworks and other tools to simply do it for you isn't very impressive.
DOM. It is very common to see developers hiding from the DOM by layers of abstractions and other stupid crap. querySelectors are great, but are also 2800x slower than the standard DOM methods. That isn't trivial. These methods are super simple, so there is no valid excuse for developers fumbling over this or hiding in fear. http://prettydiff.com/guide/unrelated_dom.xhtml
Node.js If you are a serious developer should have a pretty solid grasp of how to walk the file system. You should understand how to conveniently read files as text or less conveniently read files as bit for bit binary buffers.
Timing and asynchronous operations. Events, timers, network requests are all asynchronous and separate from each other and exist both in Node and in the browser. You have to be able to understand how to work with callbacks or promises.
Accessibility. The interactions imposed by JavaScript can present accessibility barriers. A serious JavaScript developer is already familiar with WCAG 2.0 and knows how to work within its recommendations or when to push back on violating business requirements.
Security. You need to have at least a basic understanding of security violations, security controls, and privacy. You don't need to be a CISSP, but you need to be able to supply recommendations and avoid obvious failures. If you cannot get this right in the most basic sense you aren't a serious developer.
Data structures. You need to understand how to organize data in a way that allows the fastest possible execution without compromising maintenance. This is something that is learned through academic study and repeated experience writing applications.
Presentation and semantics. You really need to have a basic understanding how to properly organize the content your users will consume and how to present in a consumable way efficiently. This is something almost completely learned from experience only. You might think CSS and HTML are simple skills that can be picked up when needed, but you would be absolutely wrong.
Knowing when to avoid the bullshit. Many developers lack the years of experience to be confident in their performance.... so some of these developers will try to fake it. Don't be an imposter, because everybody will see straight through it. Hoping mountains of abstractions, tooling, frameworks, compilers, and other bullshit will save you just bogs down your application and screws over your teammates. If you aren't confident then be honest about that and seek mentorship or get involved with open source software outside of work.

Source

JS Cheat Sheet:

--> Download the PDF Version of this Cheat Sheet here

Include Javascript:

<script type="text/javascript"></script>

// or Include it in an external file (this is a comment)
/* This is also another way you can insert comments,
Multiline normally */

<script src="myscript.js"></script><code></code>

// PS: Remember to sub to our newsletter for the Giveaway!

Variables:

var myVariable = 22; //this can be a string or number. var is globally defined

let myVariable = 22; //this can be a string or number. let can be reassigned

const myVariable = 22; //this can be a string or number. can't be reassigned

Article No Longer Available

Data Types:

//string
let string = 'ASCII text';
//int
let integer = 123456789;
//float
let float = 123.456;
//boolean, can be true or false
let t = true;
let f = false;
//undefined
let undef;//defaults to undefined
let undef = undefined;//not common, use null
//null
let nul = null;
//array
let arr = ['Hello','my','name','is','Dr.Hippo',123,null];
//object
let person = {'name':'John Smith','age':27};
//function
let fun = function(){
    return 42;
}

Source - Datatypes In JavaScript - c-sharpcorner.com

Operators

Basic Operators

+ — Addition
- — Subtraction
* — Multiplication
/ — Division
(...) — Grouping operator, operations within brackets are executed earlier than those outside
% — Modulus (remainder )
++ — Increment numbers
-- — Decrement numbers

Article No Longer Available

Comparison Operators

== Equal to
=== Equal value and equal type
!= Not equal
!== Not equal value or not equal type
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
? Ternary operator

Logical Operators

&& Logical and
|| Logical or
! Logical not

Bitwise Operators

& AND statement
| OR statement
~ NOT
^ XOR
<< Left shift
>> Right shift
>>> Zero fill right shift

Loops

for - loops through a block of code a number of times.

for (statement 1; statement 2; statement 3) {
  // Coooode
}

for/in - loops through the properties of an object.
for/of - loops through the values of an iterable object.

while - loops through a block of code while a specified condition is true.

let i=0;
while (i < 10) {
    console.log(i);
    i++;
}

Break and Continue

When you use break without a label, it terminates the innermost enclosing while, do-while, for, or switch immediately and transfers control to the following statement.
When you use break with a label, it terminates the specified labeled statement.

When you use continue without a label, it terminates the current iteration of the innermost enclosing while, do-while, or for statement and continues execution of the loop with the next iteration. In contrast to the break statement, continue does not terminate the execution of the loop entirely. In a while loop, it jumps back to the condition. In a for loop, it jumps to the increment-expression.
When you use continue with a label, it applies to the looping statement identified with that label.

Source - Loops and iteration - MDN

Article No Longer Available

Strings

dev.to Article - 10 JavaScript string methods you should know - by @frugencefidel

Escape characters

\' — Single quote
\" — Double quote
\\ — Backslash
\b — Backspace
\f — Form feed
\n — New line
\r — Carriage return
\t — Horizontal tabulator
\v — Vertical tabulator

Array and array methods

Top 10 JavaScript Array Methods You Should Know - By Rachel Cole at morioh.com

concat(arr1,[...]) // Joins two or more arrays, and returns a copy of the joined arrays
copyWithin(target,[start],[end]) // Copies array elements within the array, to and from specified positions
entries() // Returns a key/value pair Array Iteration Object
every(function(currentval,[index],[arr]),[thisVal]) // Checks if every element in an array pass a test
fill(val,[start],[end]) // Fill the elements in an array with a static value
filter(function(currentval,[index],[arr]),[thisVal]) // Creates a new array with every element in an array that pass a test
find(function(currentval,[index],[arr]),[thisVal]) // Returns the value of the first element in an array that pass a test
findIndex(function(currentval,[index],[arr]),[thisVal]) // Returns the index of the first element in an array that pass a test
forEach(function(currentval,[index],[arr]),[thisVal]) // Calls a function for each array element
from(obj,[mapFunc],[thisVal]) // Creates an array from an object
includes(element,[start]) // Check if an array contains the specified element
indexOf(element,[start]) // Search the array for an element and returns its position
isArray(obj) // Checks whether an object is an array
join([seperator]) // Joins all elements of an array into a string
keys() // Returns a Array Iteration Object, containing the keys of the original array
lastIndexOf(element,[start]) // Search the array for an element, starting at the end, and returns its position
map(function(currentval,[index],[arr]),[thisVal]) // Creates a new array with the result of calling a function for each array element
pop() // Removes the last element of an array, and returns that element
push(item1,[...]) // Adds new elements to the end of an array, and returns the new length
reduce(function(total,currentval,[index],[arr]),[initVal]) // Reduce the values of an array to a single value (going left-to-right)
reduceRight(function(total,currentval,[index],[arr]),[initVal]) // Reduce the values of an array to a single value (going right-to-left)
reverse() // Reverses the order of the elements in an array
shift() // Removes the first element of an array, and returns that element
slice([start],[end]) // Selects a part of an array, and returns the new array
some(function(currentval,[index],[arr]),[thisVal]) // Checks if any of the elements in an array pass a test
sort([compareFunc]) // Sorts the elements of an array
splice(index,[quantity],[item1,...]) // Adds/Removes elements from an array
toString() // Converts an array to a string, and returns the result
unshift(item1,...) // Adds new elements to the beginning of an array, and returns the new length
valueOf() // Returns the primitive value of an array

Functions

Syntax

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

Examples

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

// Convert Fahrenheit to Celsius:
function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

Source - JavaScript Functions - w3schools

Maths

Methods

Finally - How to understand math - Awesome resource list 🚀

Lorenzo for World In Dev ・ Mar 30 '21

#javascript #webdev #programming #beginners

Properties

E — Euler’s number
LN2 — The natural logarithm of 2
LN10 — Natural logarithm of 10
LOG2E — Base 2 logarithm of E
LOG10E — Base 10 logarithm of E
PI — The number PI
SQRT1_2 — Square root of 1/2
SQRT2 — The square root of 2

Date

Article No Longer Available

Javascript date objects allow us to work with date and time. We can retrieve information for it by creating a date and assign and assigning it to a variable:

let d = new Date(); // We usually call it d or date

Date object provide us a lot of different methods, the most used are year, month, day, hours, minutes, seconds, and milliseconds. Remember that you always have to precise the entire year (1950 and not only 50), that we always start with 0 (so, for example, December is the eleventh, a minute is composed of 59 seconds...) and that day is in a 24 hours format.

You can then retrieve from date a lot of differents info:

d.getDate() Returns the day of the month (from 1-31)
d.getDay()  Returns the day of the week (from 0-6)
d.getFullYear() Returns the year
d.getHours()    Returns the hour (from 0-23)
d.getMilliseconds() Returns the milliseconds (from 0-999)
d.getMinutes()  Returns the minutes (from 0-59)
d.getMonth()    Returns the month (from 0-11)
d.getSeconds()  Returns the seconds (from 0-59)

We can also set things... Open the article to continue reading

Events

Mouse
onclick - The event occurs when the user clicks on an element
oncontextmenu - User right-clicks on an element to open a context menu
ondblclick - The user double-clicks on an element
onmousedown - User presses a mouse button over an element
onmouseenter - The pointer moves onto an element
onmouseleave - Pointer moves out of an element
onmousemove - The pointer is moving while it is over an element
onmouseover - When the pointer is moved onto an element or one of its children
onmouseout - User moves the mouse pointer out of an element or one of its children
onmouseup - The user releases a mouse button while over an element

Keyboard
onkeydown - When the user is pressing a key down
onkeypress - The moment the user starts pressing a key
onkeyup - The user releases a key

Frame
onabort - The loading of a media is aborted
onbeforeunload - Event occurs before the document is about to be unloaded
onerror - An error occurs while loading an external file
onhashchange - There have been changes to the anchor part of a URL
onload - When an object has loaded
onpagehide - The user navigates away from a webpage
onpageshow - When the user navigates to a webpage
onresize - The document view is resized
onscroll - An element’s scrollbar is being scrolled
onunload - Event occurs when a page has unloaded

Form
onblur - When an element loses focus
onchange - The content of a form element changes (for , and )
onfocus - An element gets focus
onfocusin - When an element is about to get focus
onfocusout - The element is about to lose focus
oninput - User input on an element
oninvalid - An element is invalid
onreset - A form is reset
onsearch - The user writes something in a search field (for )
onselect - The user selects some text (for and )
onsubmit - A form is submitted

Drag
ondrag - An element is dragged
ondragend - The user has finished dragging the element
ondragenter - The dragged element enters a drop target
ondragleave - A dragged element leaves the drop target
ondragover - The dragged element is on top of the drop target
ondragstart - User starts to drag an element
ondrop - Dragged element is dropped on the drop target

Clipboard
oncopy - User copies the content of an element
oncut - The user cuts an element’s content
onpaste - A user pastes content in an element

Media
onabort - Media loading is aborted
oncanplay - The browser can start playing media (e.g. a file has buffered enough)
oncanplaythrough - When browser can play through media without stopping
ondurationchange - The duration of the media changes
onended - The media has reached its end
onerror - Happens when an error occurs while loading an external file
onloadeddata - Media data is loaded
onloadedmetadata - Meta Metadata (like dimensions and duration) are loaded
onloadstart - Browser starts looking for specified media
onpause - Media is paused either by the user or automatically
onplay - The media has been started or is no longer paused
onplaying - Media is playing after having been paused or stopped for buffering
onprogress - Browser is in the process of downloading the media
onratechange - The playing speed of the media changes
onseeked - User is finished moving/skipping to a new position in the media
onseeking - The user starts moving/skipping
installed - The browser is trying to load the media but it is not available
onsuspend - Browser is intentionally not loading media
ontimeupdate - The playing position has changed (e.g. because of fast forward)
onvolumechange - Media volume has changed (including mute)
onwaiting - Media paused but expected to resume (for example, buffering)
animationend - A CSS animation is complete
animationiteration - CSS animation is repeated
animationstart - CSS animation has started

Other
transitionend - Fired when a CSS transition has completed
onmessage - A message is received through the event source
onoffline - Browser starts to work offline
ononline - The browser starts to work online
onpopstate - When the window’s history changes
onshow - A element is shown as a context menu
onstorage - A Web Storage area is updated
ontoggle - The user opens or closes the element
onwheel - Mouse wheel rolls up or down over an element
ontouchcancel - Screen touch is interrupted
ontouchend - User finger is removed from a touch screen
ontouchmove - A finger is dragged across the screen
ontouchstart - Finger is placed on touch screen

Asynchronous JS and Error handling

Article No Longer Available

SetTimeout will wait foo seconds and then execute the action. SetInterval will execute this same action every foo seconds.
Both can be inline or multiline, I recommend using multiline 99% of the time. It's important to notice that they work in milliseconds.

SetTimeout:

setTimeout(function(){
    alert("Hello World!"); 
}, 2000); // 2 seconds 

setTimeout(function(){ alert("The fifth episode of the series"); }, 3000);

SetInterval:

setInterval(function() {
  alert("I want to show you another Javascript trick:");
}, 1000); 

setInterval(function() {alert("How to work with SetTimeout and SetInterval");}, 1000);

If you want to remove the first delay you have to add code a first time out of the function. I recommend you save this code in a separate function you can call whenever you need. Continue reading here

Article No Longer Available

First, it's important to notice that a majority of backend actions have an unknown result, we don't know if it will work when we write our code. So we always have to write two different codes, one if the action works, another if the action results in an error. This is exactly how a try/catch work, we submit a code to try, if it works code continues, if it doesn't we catch the error (avoiding the app crashing) and run another code. This is a very common thing we don't only use in web development (also in Android app development with java for example).

Try / Catch

  try {
  // Try to run this code 
 // For example make a request to the server
}
catch(e) {
  console.log(e)
  // if any error, Code throws the error
 // For example display an error message to the user
}

Promises

The big problem with try/catch is that when you have to nest it (and you will have), it's really messy and difficult to read and write. So Javascript support promises with async functions:

Syntax: new Promise (executor)
executor= (accept, reject) =>{}

var asyncronus_function = (number)=>
        {
            return new Promise( (accept, reject)=>
            {
            })
        }

This function returns a promise object.
If function end well we return a accept(), otherwise reject()
More here

Projects ideas to become a javascript master

Projects ideas to become a javascript master 🚀 Resource compilation 💥 + Giveaway⚡

Lorenzo for World In Dev ・ Apr 10 '21

a) General (for beginners)

Converters
Word Counter
Timer / Clock
Random password generator
Calculator

b) Games

Guess the number
Math time!
Other Games

c) Social & Websites

Log-in, Sign-up
Filter
To-Do List
Social
Portfolio

Open the post for more info about each project!

Other resources:

Table of content

My cheat Sheet
Projects ideas to become a javascript master
Other resources
1. Complete Javascript cheat sheets
2. JS promises
3. JS Arrays
4. JS loops
5. Preprocessor
6. CoffeScript
7. EJS
8. Babel
9. JS Frameworks & Libraries
10. Angular
11. Vue
12. React
13. JQuery
14. Others
15. Node

Complete JS cheat sheets:

By HTML cheat sheet.com - Interactive

Incredible resource --> By website setup

PDF Version

Two Others:
By overapi

JS promises (Asynchronous JS):

Dev.to article

Article No Longer Available

Dev.to article

Article No Longer Available

By codecadamy

JS Arrays:

Quick reference - By autotelicum - PDF Version

JS Loops:

By codecademy

JS preprocessor:

CoffeeScript:

CoffeeScript website

Others:
At karloeaspirity.io

JS to CoffeeScript

EJS:

Babel:

JavaScript-based Frameworks & Libraries:

Article Angular vs vue vs react at codeinwp.com

Best Javascript Frameworks - article at hackr.io

Angular

By angular.io

Vue

By vue mastery

Other - By marozed

React

At GitHub: React + Typescript cheat sheet

Others:
By react cheat sheet.com

JQuery

AJAX intro + cheat sheet at GitHub

By ascarotero.com - Really well done

By Website Setup - PDF Version

By make website hub

PDF Version

Article about top 10 jquery cheat sheets

Or by over API

Others

Ember.js:

Meteor:

Mithril:

Node

Source (with links) - 50 resources to help you start learning JavaScript - By Daniel Borowski - At Medium

Other Resources:

Advanced Topics

How Browsers Work: Behind the scenes of modern web browsers
Learning Advanced JavaScript by John Resig
JavaScript Advanced Tutorial by HTML Dog
WebGL Fundamentals
Learning JavaScript Design Patterns by Addy Osmani
Intro to Computer Science in JavaScript
Immutable data structures for JavaScript

Libraries/Frameworks/Tools

Introduction to React video
React Interview Questions
JavaScript Promises: A Tutorial with Examples
Khan Academy: Making webpages interactive with jQuery
A Beginner’s Guide To Grunt: Build Tool for JavaScript
Getting Started with Underscore.js
jQuery Course by Code School
Thinkster.io Courses on React and Angular
The Languages And Frameworks You Should Learn In 2016
ES6 Tools List on GitHub
Getting Started with Redux

Server-side JavaScript

Real-time Web with Node.js Course by Code School
NodeSchool Course
Node.js First Look on Lynda
All about NodeJS Course on Udemy
Server-side Development with NodeJS Course on Coursera

Read also:

Projects ideas to become a javascript master 🚀 Resource compilation 💥 + Giveaway⚡

Lorenzo for World In Dev ・ Apr 10 '21

#javascript #webdev #programming #beginners

Finally - How to understand math - Awesome resource list 🚀

Lorenzo for World In Dev ・ Mar 30 '21

#webdev #beginners #productivity #javascript

25 Udemy Courses Worth Your Money & Time 🚀

Garvit Motwani for World In Dev ・ Apr 22 '21

Thanks for reading and Happy coding ❤

Full Compilation of cheat sheets:

Article No Longer Available

⚡Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

Subscribe to my Newsletter!

The PDF version of this article!!!
Monday: Weekly digeeeeeests!!!
Wednesday: Discussions and dev insights - We debate around developer lifes - Examples: The importance of coffee behind development / If you weren't a dev, you'd be a...
Gifts, lots of 🎁. We send cheat sheets, coding advice, productivity tips, and many more!
That's --> free <-- and you help me!

PS: It took me around 10 hours to complete the article - So please remember the like ❤️ and super like 🦄 - Let's reach the top of the month this time 🚀

Projects ideas to become a javascript master 🚀 Resource compilation 💥 + Giveaway⚡

Lorenzo — Sat, 10 Apr 2021 13:17:18 +0000

Hello World! Today I wanted to share with you 10 projects you can build to be from zero to hero in javascript!

🔖 - Bookmark the article to save it and remember the like ❤️ and maybe super like🦄

Read also:

400+ JavaScript Interview Questions 🎓 With Answers 🌠

Lorenzo for World In Dev ・ Apr 27 '21

A CodePen - JavaScript: Currency Calculator

Article No Longer Available

⚡Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important

Table of content

a) General (for beginners)

Converters
Word Counter
Timer / Clock
Random password generator
Calculator

b) Games

Guess the number
Math time!
Other Games

c) Social & Websites

Log-in, Sign-up
Fitler
To-Do List
Social
Portfolio

Hey, remember that I have a newlsetter!

a) General --> For beginners

1. Converters

I don't have to say a lot in reality for this category. Just build something that with a given input, convert it into a nice-looking output, for us to gain the time of doing it manually 🙃. If you do a full webpage around it, that's always a plus, but you can even do a really easy javascript code.

For example, I built a currency converter, it was one of my first JS projects!

2. Word counter

Just another easy fun project, build something count the number of words and characters in a text. Then the goal is to give as many stats as possible, showing reading and speaking time, keywords and their frequency, and others, be creative!

An Article - Building a Word Counter in JavaScript

3. Timer / Clock

That one also is quite easy, just try to build a basic functionality around time, like a timer, a digital clock, a scheduled alarm... And if you have time and willingness to learn, why not doing the entire clock app, maybe on an entire website!

An Article - How to Create a Digital Clock using JavaScript

4. Random password generator

Keep your learnings secure, you can create a random password generator in 10 minutes in reality. But like so many other projects on this list, they are fun to do only if you make them yours by adding special features! I think you can go deep into customization possibilities with this one.

A Video - Strong Random Password Generator Mini Project using Html CSS & Javascript | Password Generator App - by
Online Tutorials

5. Calculator

Now you can build something more challenging, a fully working calculator. That should not be too difficult, everyone knows how a calculator works. Just try to be original, adding features obviously. Make math fun!

A freecodecamp Article - How to build an HTML calculator app from scratch using JavaScript

Another Source - A CodePen - "Neumorphism calculator with dark mode switch"

b) Games

5. Guess the number

That's a very famous and easy game, you generate a random number from 0 to 50, the user has to guess it. And you give him some hints in the process (lower or greater). Nothing extraordinary, but you're starting to make great progress!

Learn JavaScript by writing a guessing game

6. Math questions

That can be fun, you create a game that generates random math questions (like 1304+222), with an open answer or a list of different propositions for the user. The code automatically checks if the result is right or wrong. Then you can do a scorekeeper, a timer, let the user set a difficulty, add a leaderboard, and make it even more customizable allowing the user to filter questions!

Stack Exchange - Code Review - Maths Q&A game in JavaScript

7. Other games

--> Card Game, Rock-Paper-Scissors, Tic tac toe, Pong game...

Actually, you can build lots of games with javascript, but I think these four do quite a lot in making you progress in javascript. A card game is fun to do and can be easily played directly on the console, without adding the full visual stuff. For example, I built a blackjack game completely playable from the console. Then Rock paper scissor and Tic tac toe. You can do the first two players game, or even build a bot (more for the tic tac toe game in reality) to allow even a single user to play.
The pong game can allow you to do a more advanced 2d game with real-time updates (animations).

c) Social & Websites

8. Log-in, Sign-up...

Now we start with some more social / website-focused content. First I suggest you be able to quickly write a nice looking and well-performing Log-in / Sign-up system for websites, I'm sure you will need it someday, and then you will remember this training, and you will manage the situation like a pro!

A video by FrontendTips - Login / Signup panel in css and javascript (With source code)

9. Filter

That's easy as important to know how to do a basic filter. in pure javascript, you can need it to filter elements in an array. In real-life examples, you need to filter comments, posts, articles, videos... For example you can build, using the dev.to API, a webpage that allow the user to filter the articles. You have infinite way to filter articles!

HOW TO Filter/Search List- W3school

11. To-do list

The to-do list. How famous... Do you know notion? I love this app a lot, but I'm sure that you can improve the user experience. Try building something that makes planning a fun thing!

HOW TO create a to-do list - W3School

10. Social

Now let's get to the really serious stuff, with javascript and web development you can build really complex things, so why not build a social with front-end and back-end coded in javascript?

Build a simple social network with javascript - pusher.com

12. Portfolio

Hey, I actually wrote a full article about that, whyyyy not checking it out right now? After leaving a like to this article for sure!

Article No Longer Available

Other useful sources for you
20+ Projects You Can Do With JavaScript
100+ JavaScript Projects for Beginners!
40+ JavaScript Projects For Your Portfolio
17 JAVASCRIPT PROJECTS YOU CAN BUILD TO PERFECT YOUR CODING SKILLS
App ideas - At GitHub
5 Vanilla JavaScript Projects for Beginners
40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS
Build 15 JavaScript Projects - Vanilla JavaScript Course
10 JavaScript Projects in 10 Hours - Coding Challenge 🔥
Learn programming
with curated JavaScript projects - codementor.io

Thanks for reading and Happy coding ❤

8 JavaScript Tips & Tricks That No One Teaches 🚀

Garvit Motwani for World In Dev ・ Apr 6 '21

#javascript #webdev #html #es6

Article No Longer Available

⚡Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

Subscribe to my Newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!

World in Dev Digest - Top Articles and Tech Events This Week - 23/3/2021

Lorenzo — Tue, 23 Mar 2021 16:52:11 +0000

“The difference between stupidity and genius, is that genius has its limits” - Masashi Kishomoto

3 articles to read today at dev.to:

--> General article:

15 tips and tricks for javascript devs working with the DevTool:

15 DevTool Secrets for JavaScript Developers

OpenReplay Tech Blog ・ Mar 22 '21

#webdev #performance #javascript #tutorial

By @asayerio_techblog

--> A Technical article:

A small but nice article wrote to understand oop in simple terms.
In two lines the definitions of an object, a class, Encapsulation, Abstraction, Polymorphism, Inheritance...

Explain me OOP's concept in simple terms

Rahul ・ Mar 23 '21

#webdev #javascript #oop #programming

By @rahxuls

--> A video:

Cool video, nice music, excellent codepen sample, I don't say anything else...

Creating a Dark & Light Toggle Mode - UI Design

Ahmad Emran ・ Mar 23 '21

#javascript #css #showdev #webdev

By @ahmadbassamemran

External article:

Git aliases

Everyone wants to work faster, easier and one way to achieve this is to simplify their daily tasks with simple scripts or with creating aliases to run long commands that they often forget or just tired of typing them over and over again.
If you're not using any GUI for Git or using Visual Studio Code alongside Git you can definitely take advantage of the Git aliases to make things easier for you. If you want to learn how you can use Visual Studio Code with Git check out this article here:
At devdojo

Daily discussion:

Most don't know, but a developer is someone who turns coffee into code. ☕

Article No Longer Available

By @devlorenzo - me 🙃

Site of the day:

A front-end coding challenges site. You can create a challenge that you and other devs can participate in.
Codier.io

Podcast episode of the day:

Docker for Python Developers (2021 Edition):

Docker is one of the core elements of developing Python applications in consistent ways as well as running them across different hardware universally. On this episode, you'll meet Peter McKee from Docker. He's here to catch us up on what's happening in the Docker universe for Python developers.

By Talk Python to me

Tech event of the day:

Note that this is not free content, although we will try to promote only free events if possible.

The age of implementation - MIT Technology Review's annual event on artificial intelligence

"Join EmTech Digital to stand on the shoulders of giants. Get insight from technology experts and industry leaders all along the innovation path. Learn about new developments and opportunities in AI. See examples of how it is solving complicated, real-world challenges and transforming the business landscape."

Thanks for reading!

Subscribe to our newsletter to receive our weekly recap directly on your email!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

Best discounts for devs 💻 this month 💥🚀 to bookmark 🔖

Lorenzo — Wed, 17 Mar 2021 15:46:57 +0000

Hello world! In this post, I'm gonna show you the best discount for devs I used / founded useful.

🔖 - Bookmark the article to save the list

And remember the like ❤ and maybe 🦄

Best discounts for devs:

1- Programming hub premium

→ Code: "HOME95" / Lifetime pro version: full access to all the courses + tests and certificates of completition. Programming Hub is a very cool code learning mobile app with more than 50 courses.

2 - PC Acer

→ Acer discounts all around the planet for notebooks and desktops. Up to 200 dollars / 300 euros. Very useful for buying a new pc, particularly for gaming. I bought the predator 300 around a month ago.

3 - It’s NordVPN’s birthday — unbox your gift

→ Buy a 2-year plan with 68% off and automatically get extra service time as a gift (+30-day money-back guarantee). Okay, I know that you hate NordVPN sponsors, and you can be sure I'm not one of those, but it's such a fantastic discount!

4 - Discord discount

→ 16% on annual nitro subscription + 30% server bumping. Everyone knows discord, and how it's cool to have a personalized tag and animated icon.

5 - Miro student / Teacher discount

→ Miro is a very cool software that provides a board for us to work with. With the free plan, you can have up to three modifiable boards. But Education plan users can take advantage of the following features:

Unlimited active boards
Unlimited external board viewers and commenters + unlimited
Guest Editors
Private boards
Advanced Attention management
Projects
Custom Templates
High-quality resolution export without a watermark
Manual board backup
Voting
Timer

For students and teachers, it's all free. Learn more here

Other discounts for students in developing:

Source

Other resources for students and devs:

GitHub Repo: Discounts for students

GitHub Repo: Free softwares for devs

Check also: GitHub Repo - Awesome (list of resources for devs)

Hope this helps!

Comments other discounts!

And remember the like! ❤ and maybe 🦄

Article No Longer Available

Linked article --> Check out other 5 incredible dev discounts created by Michael Chrupcala 🚀

5 Investments for Web Devs (with discounts!)

Michael Chrupcala ・ Mar 17 '21

#webdev #productivity #programming #beginners

Terminal Cheat Sheet 🔥 - The most useful terminal commands 🚀

Lorenzo — Sat, 13 Mar 2021 14:34:54 +0000

Hello world! Here is a list of the basic terminal commands you should know by heart.

🔖 - Bookmark the article to save the cheat sheet

And remember to smash that like button ❤️ and maybe 🦄

You absolutely need to read that:

Article No Longer Available

Basics

I love the git bash (I'm on windows) - version 4.4.23

Git Bash emulates a bash environment on windows. It lets you use all git features in command line plus most of standard unix commands.

3 basics commands to remember:

Clear: type "clear" / ctrl + l (windows - Linux) / Command + K (Mac)
help - show all comands
help commandName - help about a specific command
ctrl+D or ctrl+C * 2 to exit

Working with Directories:

ls - list / list the contents on your current directory
ls -la - Give more information about the list 
pwd - Print Working directory / Print the path to the working directory
cd directory - Change directory / Move between folders - Relative Path (just folders directly contained in the one you are currently)
cd /firstDirectory/secondDirectory/FinalDirectory - Absolute Path (search a directory anywhere in pc)
cd .. - Go back a directory
cd ~ - return to the home directory
mkdir - make directory / create a new directory+
mkdir -v - Make directory + add lines that say you created a directory
touch - Create a file (or multiple) or "touch", change a file (update when it was last modified)
rm - Remove / Delete a File (forever)
rm -rf - Remove recursive force / Delete a directory add all file nested in the directory (also other directories)
rmdir - remove a directory (only work on empty folders)

Basic commands:

Write: help to access

Git available commands:

Write: git --help to access

Write: git help -g to access

Extra: Writing git help git the command line redirect you to a download with all the git bash available commands in a more readable way

Type git help -a to have access to a more advanced line by line commands description - Write q to exit

Hope this helped!

And remember to smash that like button ❤️ and maybe 🦄

You added:

# opens .zprofile for editing (zsh profile)
alias prof='nano /<<ROOTDIRECTORYHERE>>/.zprofile' 
# opens .zshrc for editing
alias rc='nano /<<ROOTDIRECTORYHERE>>/.zshrc' 
# source profiles (should be done every time after changing profile)
alias s='source /<<ROOTDIRECTORYHERE>>/.zprofile; source /<<ROOTDIRECTORYHERE>>/.zshrc;'
# fancy ls
alias lk='ls -lhkart'
# for 'lk' typos ;)
alias kl='ls -lhkart' 
# open current folder in GUI
alias show='open .'
# go back a folder
alias back='cd ..'
# previous folder
alias prev='cd -'
# cd with no arguments brings you to your root folder :)
alias home='cd'

cd (without args) - Return to the home directory

pushd and popd.

The pushd command saves the current working directory in memory so it can be returned to at any time, pushd moves to the parent directory. The popd command returns to the path at the top of the directory stack.[5][6] This directory stack is accessed by the command dirs in Unix or Get-Location -stack in Windows PowerShell.
Learn more

Article No Longer Available

Recommended reading!

Article No Longer Available

Subscribe to my Newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!

Are you obsessed by programming? 🧠🤯

Lorenzo — Wed, 10 Mar 2021 15:05:55 +0000

Hello World! My first three #healthydebate generated more than 6000 views and 130 comments! So I decided to create another one, it feels so good to have interactions with other programmers!

First -general- question, do you think you are obsessed by programming?

Obsessions are recurrent, persistent, and intrusive thoughts. (I removed unwanted from the list - as I hope, you love programming!)

If you work as a programmer, do you code out of work?
Around how many hours do you code every day?
How many do you think about programming?
Could you just stop programming for a month? (I add without having problems)
Fun question - Have you already dreamed of (you) programming or code? Tell us the story!

You have nothing to lose, write that comment!

--> And don't hesitate to psychoanalyze yourself. I think it's a good habit

Another idea to convince you to write a comment. The comment with more likes/reply will have free advertising on my next discussion post (+2k views per post)

I'm very interested in creating a conversation / a debate thinking if you think that programming is an obsession. I also have in mind to use quotes from this post in my next writings. So don't limit yourself by writing!

Another very interesting conversation is about "why do you code?"(why do you love programming). I invite you to express yourself there too. Go check it out!

Article No Longer Available

Top Google Chrome Extensions For Devs 🔥🚀

Lorenzo — Sun, 07 Mar 2021 14:01:05 +0000

Top Firefox Extensions For Developers 🔥🚀

brandon_wallace ・ Mar 7 '21

Hello world!In this post I'm gonna show you my favorite chrome extensions! They makes me more productive. And gives me inspiration to do more coding.

🔖 - Bookmark the article to save it

And remember the like ❤

You absolutely need to read that:

Article No Longer Available

My Google Chrome extensions:

Grepper → Allow you to save code

2 - Shortcuts for google → Open google apps with a click

3 - Video Speed Controller → Allow you to control the speed of a video with shortcuts and to overcome the 2x speed

4 - Code Line Daily → every day a line of code in your browser (HTML, CSS, and Javascript)

5 - Volume Manager → Manage the volume of a tab

6 - VisBug → Open source web design debug tools built with JavaScript: "a FireBug for designers".

7 - Better-OneTab → Allow you to manage and save your tabs

8 - Grammarly for chrome → Correct my English 😀

9 - Color Zilla → Pick up a color from any web page and copy the hex

Or:

9 - Quick color picker

10 - What Font → Check the font of any web page.

11 - Dimension → Check the dimensions (in pixels) of elements / their distance

12 - Lorem Ipsum Generator → Generate lorem ipsum test quickly

13 - CSS viewer → CSS property viewer

14 - Window Resizer → Allow you to resize the web page (for responsive webpages)
Web Developer → Adds a toolbar button with various web developer tools.

15 - You can also install an Ad Blocker like AdBlock or AdGuard

Your extensions:

JSON formatter

Fonts ninja - Alternative to what font

Vinium
--> The Hacker's Browser. Vimium provides keyboard shortcuts for navigation and control in the spirit of Vim.

I add this extension I just discovered:

Calculator - very useful when you have to use the calculator while staying in the same tab (open as a popup)

Hope this helps!

Comments your favorite chrome extensions!

And remember the like! ❤

Article No Longer Available

Subscribe to my Newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!

Join us on Discord to participate in hackathons with us / participate in our giveaways (we are offering a free Udemy course at 200 members)!

Linked article --> Check out this awesome list of Firefox extension created by [Brandon Wallace] 🚀

Top Firefox Extensions For Developers 🔥🚀

brandon_wallace ・ Mar 7 '21

Image by Gerd Altmann from Pixabay

The ultimate Cheat sheets compilation (200+) - 🔥Roadmap to dev 🚀 - 2

Lorenzo — Tue, 02 Mar 2021 10:24:42 +0000

Hello World Today I wanted to share with you my Cheatsheet Compilation that every dev should know about.

PS: It took me around 8 hours to complete the whole article (the two parts) - So please remember the like ❤️ and maybe super like🦄

🔖 - Bookmark the article to save it

This is part 2 - open part 1

Article No Longer Available

Read also:

400+ JavaScript Interview Questions 🎓 With Answers 🌠

Lorenzo for World In Dev ・ Apr 27 '21

Hey, remember to check and 🌟 the GitHub repo of this project

Article No Longer Available

⚡Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important

Table of content:

-- Part 1 --

💻 - Front End

📕 - Back End

📓 - Databases

SQL
- MySQL
- PostgreSQL
- SQLite
NoSQL
- MongoDB
- Cassandra
- Redis

-- Part 2 -- (This part)

📱 - Mobile apps

Java
Kotlin
Android studio
Swift
React

🖲 - Version control

Git
GitHub

📗 - MDN / W3school

Learn web development
HTML
CSS
JavaScript
HTTP
APIs
Others

🚀 Extra

LUA (game development)
R (data science)
Scala (data science)
Dart
Chrome Extentions
VS code Setup
Your sources
- C and C++
- Your cheat sheets
  - Linux

Remember the like ❤️

Go to Bottom - ⬇️

📱 - Mobile apps

Table of content

Java
Kotlin
Android studio
Swift
React
Go to Top - 🔝

Java

By hackr.io

By princeton

By programming with mosh - PDF version - 18 pages

By edureka

Go to Top - 🔝

Kotlin

By Kotlin academy - at medium

By raywenderlich.com

PDF Version

By Calvin alexander - notes

By koenig-media

Kotlin playground

Go to Top - 🔝

Android Studio

Schortcuts:

At cheatography

Android studio Docs

By dummies.com - series of articles

Go to Top - 🔝

Swift

Swift docs

By raywenderlich

PDF Version

By code with chris

By learn app making - at GitHub

Go to Top - 🔝

React / React Native

At GitHub: React + Typescript cheat sheet

By react cheat sheet.com

Go to Top - 🔝

🖲 - Version Control

Table of content

Git
GitHub
Go to Top - 🔝

Git

PDF download

By gitlab - PDF \Version

By git-tower.com

Post at medium

Go to Top - 🔝

GitHub

By education.github.com

GitHub lab - Course: Introduction to GitHub

Markdown cheat sheet

Go to Top - 🔝

📗 - Mozilla Developer Network / W3school

Table of content

Learn web development
HTML
CSS
JavaScript
HTTP
APIs
Go to Top - 🔝

Web development

Link

HTML

CSS

Javascript

Link

HTTP

Link

APIs

Link

Others

W3school:

Go to Top - 🔝

🚀 - Extra

Table of content

LUA for game development
R (for data science)
Scala (for data science)
Dart
C and C++
Your sources
Go to Top - 🔝

LUA