Forem: World In Dev

Weekly Digest 30/2021 – Top of the Week

Marco Biedermann — Sun, 01 Aug 2021 17:32:45 +0000

Welcome to my Weekly Digest #30 which is the first one in August for this year.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

🎉 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

You will receive our articles directly to your inbox 📬.

Interesting articles to read

Creating an accessible autocomplete experience

After many months of research, development, and testing, we’re excited to announce that the React Spectrum ComboBox component and React Aria useComboBox hook are now available! In this post, we'll take a deeper look into some of the challenges we faced when building an accessible and mobile-friendly ComboBox.

Creating an accessible autocomplete experience

A framework for building Open Graph images

We recently set about creating a framework and service for automatically generating social sharing images for repositories and other resources on GitHub.

A framework for building Open Graph images | The GitHub Blog

ES2021 Features

ES2021 as approved by the Ecma General Assembly

ES2021 features list

How to test component interactions

Learn how to simulate user behavior and run functional checks

How to test component interactions

Some great videos I watched this week

Building A Sliding Puzzle Game with a Custom Image Using ReactJS

In this video tutorial, Daniel shows you how to build a 16 tile sliding puzzle game where you can set your own image as the puzzle background.

by Daniel Bark

HackTheBox "Business CTF" - discordvm - Node.js Sandbox Escape

by John Hammond

The New Way To Debug JavaScript in VS Code

VS Code now has built-in debugging. This means you don't need to install an extra extension to get started debugging JavaScript. In this video, James will show you how to set it up

by James Q Quick

Terraform in 100 Seconds

Terraform is an Infrastructure as Code (IAC) tool that can provision resources in the cloud. Learn how to set up terraform and connect it to cloud providers like AWS, Google Cloud, Azure, or Docker to automate your infrastructure

by Fireship

VS Code tips: Add missing function Quick Fix for JavaScript and TypeScript

Use this quick fix to stub out missing functions in TypeScript and JavaScript files

by Matt Bierner

A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other

We go through some image best practices, look at a clever technique for testing layout sizes with a single click, deal with small screen layouts, and then battle with how we get to keep our nice layout when extra HTML elements "get in the way".

by Chris Coyier

Useful GitHub repositories

GitHub Readme Stats

Get dynamically generated GitHub stats on your readmes!

anuraghazra / github-readme-stats

⚡ Dynamically generated stats for your github readmes

GitHub Readme Stats

Get dynamically generated GitHub stats on your readmes!

View Demo · Report Bug · Request Feature

Français · 简体中文 · Español · Deutsch · 日本語 · Português Brasileiro · Italiano · 한국어 Nederlands नेपाली . Türkçe

Love the project? Please consider donating to help it improve!

Are you considering to support the project by donating to me? Please DON'T!!

Instead, Help India fight 2nd deadly wave of COVID,
Thousands of people are dying in India for lack of Oxygen & COVID related necessary infrastructure.

Visit https://indiafightscorona.giveindia.org and make a small donation to help us fight covid and overcome this crisis.
Your small help goes a long way. ❤️

Features

GitHub Stats

…

View on GitHub

Size Limit

Size Limit is a performance budget tool for JavaScript. It checks every commit on CI, calculates the real cost of your JS for end-users, and throws an error if the cost exceeds the limit.

ai / size-limit

Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.

Size Limit

Size Limit is a performance budget tool for JavaScript. It checks every commit on CI, calculates the real cost of your JS for end-users and throws an error if the cost exceeds the limit.

ES modules and tree-shaking support.
Add Size Limit to Travis CI, Circle CI, GitHub Actions or another CI system to know if a pull request adds a massive dependency.
Modular to fit different use cases: big JS applications that use their own bundler or small npm libraries with many files.
Can calculate the time it would take a browser to download and execute your JS. Time is a much more accurate and understandable metric compared to the size in bytes.
Calculations include all dependencies and polyfills used in your JS.

With GitHub action Size Limit will post bundle size changes as a comment in pull request discussion.

With --why, Size Limit…

View on GitHub

dribbble shots

Tweets

Matt Bierner

@mattbierner

Todays's @code tip: Markdown math

VS Code's built-in #markdown preview supports KaTeX math equations.

Use $math$ for inline math

Use $$math$$ for centered math blocks

#code2020

15:30 PM - 26 Jul 2021

Nat Friedman

@natfriedman

We’ve just added built-in citation support to GitHub so researchers and scientists can more easily receive acknowledgments for their contributions to software.

Just push a CITATION.cff file and we’ll add a handy widget to the repo sidebar for you.

Enjoy! 🎉

20:43 PM - 27 Jul 2021

Adam Argyle

@argyleink

the cure for a noisy styles sidebar?
filtering 🤓

reduce a huge, overwhelming list of properties and values.. to just a few, by typing a bit of your intent into the @ChromeDevTools styles pane filter bar 👍🏻

13:37 PM - 28 Jul 2021

GitHub

@github

Want to quickly find a string in your project? You can use the 'git grep' command in your local repo.

15:14 PM - 30 Jul 2021

Steven ⬢

@styfle

Array.prototype.at() is available now! Don't be the _last_ to know about it 🙂

◦ Chrome 92
◦ Firefox 90
◦ Node.js 16.5.0

developer.mozilla.org/en-US/docs/Web…

03:35 AM - 30 Jul 2021

Picked Pens

Gradient Stroke

by Marco Biedermann

11 Geometric Trees

by Roden

Podcasts worth listening

Syntax – The Surprisingly Exciting World of Favicons

In this Hasty Treat, Scott and Wes talk about favicons. Favicons are a bit of mystery and something people don't talk about that often.

The CSS Podcast – counters and @counter-style

Count on The CSS Podcast to cover counters. Una and Adam teach all the ways to create, reset, and update counters. Use them for lists, games, and more!

Syntax – ShopTalk x Syntax

In this episode of Syntax, Scott and Wes do a collaboration with Chis Coyier and Dave Rupert from ShopTalk Show! They talk about favorite tech stacks, podcasting, learning new tech, dealing with FOMO, and more!

The Changelog – Modern Unix tools

This week we’re talking with Nick Janetakis about modern unix tools, and the various commands, tooling, and ways we use the command line. Do you Bash or Zsh? Do you use cat or bat? What about man vs tldr? Today’s show is a deep dive into unix tools you know and love or should know, and maybe love.

Thank you for reading, talk to you next week, and stay safe! 👋

Weekly Digest 29/2021 – Top of the Week

Marco Biedermann — Sun, 25 Jul 2021 17:33:40 +0000

Welcome to my Weekly Digest #29 of this year.
It's still a bit quiet out there in the community due to summer holidays.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

🎉 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

You will receive our articles directly to your inbox 📬.

Interesting articles to read

The Large, Small, and Dynamic Viewports

There are some changes being made regarding viewport units. The additions define several viewport sizes: the Large, Small, and Dynamic Viewport.

The Large, Small, and Dynamic Viewports

Temporal: getting started with JavaScript’s new date time API

Temporal: getting started with JavaScript's new date time API

Automatic hyphenation depends on the defined document language

Ways to hyphenate words and how the document language affects automatic hyphenation.

Automatic hyphenation depends on the defined document language

Some great videos I watched this week

Performance Testing CSS-Tricks with WebPageTest

Chris Coyier (CSS-Tricks) gets a hands-on performance review with Tim Kadlec (WebPageTest).

by Chris Coyier

The Math behind Animations

Learn React Native Gestures and Animations

by William Candillon

Useful GitHub repositories

visx

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

airbnb / visx

🐯 visx | visualization components

visx

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

Docs • Gallery • Blog • Slack #visx • Changelog • Getting started tutorial

Usage

Let's make a simple bar graph.

First we'll install the relevant packages:

$ npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale

import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';
// We'll use some mock data from `@visx/mock-data` for this.
const data = letterFrequency;

// Define the graph dimensions and margins
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20

…

View on GitHub

WiFi Card

Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc.

bndw / wifi-card

📶 Print a QR code for connecting to your WiFi (wificard.io)

WiFi Card

https://wificard.io

Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc.

Running locally

Run the official Docker image on http://localhost:8080

make run

Development

Make sure you have yarn installed
Run the live-reload server on http://localhost:3000
```
make dev
```

This project uses Prettier formatting and all pull requests must pass the automated lint checks prior to merging.

Run the lint check with:

make fmt

Rewrite the files to resolve any style issues with:

make fmt.write

Supported Languages

Language	Author Credit
English	bndw
Chinese	Baoyuantop
Spanish	oscfdezdz
Portuguese	pedrorenan
Japanese	hatsu38
Russian	Teraskull
Ukrainian	Teraskull
Dutch	wouterbrink
French	Divlo

View on GitHub

Windows 11 in React

This open-source project is made in the hope to replicate the Windows 11 desktop experience on the web, using standard web technologies like React, CSS (SCSS), and JS.

blueedgetechno / windows11

windows 11 in react 💻🌈⚡

Windows 11 in React

This open source project is made in the hope to replicate the Windows 11 desktop experience on web, using standard web technologies like React, CSS (SCSS), and Js.

Live Experience🌈: win11.blueedge.me

Gallery

Why

WHY NOT? Why not just waste a week of your life creating a react project just to coverup your insecurities of how incompetent you are. Just Why not!

Features

Start Menu, Search Menu and Widgets
Desktop and Right Click action
Side Navigation and Calendar View
Snap windows in different layouts
Browser, Store, Terminal, Calculator
Notepad, Vscode, Whiteboard
File Explorer + other apps
Drag and Resize windows
Startup and Lock screen
Themes and Background

📑 suggest more

Stack

Framework - React (^17.0.2) + Redux
Component/UI Library - None!!
Styling Solution - SCSS and CSS Modules (tailwind).
Icons - fontawesome

FAQ

How long it took?
- Honestly It took 2-3 days collecting assets, 2-3…

View on GitHub

Infracost

Infracost shows cloud cost estimates for infrastructure-as-code projects such as Terraform. It helps DevOps, SRE, and developers to quickly see a cost breakdown and compare different options up front.

infracost / infracost

Cloud cost estimates for Terraform in pull requests💰📉 Love your cloud bill!

Infracost shows cloud cost estimates for infrastructure-as-code projects such as Terraform. It helps DevOps, SRE and developers to quickly see a cost breakdown and compare different options upfront.

Show full breakdown of costs

Show diff of monthly costs between current and planned state

Quick start

Assuming Terraform is already installed, get the latest Infracost release:

macOS Homebrew:

brew install infracost

Linux/macOS manual download:

# Downloads the CLI based on your OS/arch and puts it in /usr/local/bin
curl -fsSL https://raw.githubusercontent.com/infracost/infracost/master/scripts/install.sh | sh

Docker and Windows users see here.

Run Infracost using our example Terraform project to see how it works:

git clone https://github.com/infracost/example-terraform.git
cd example-terraform/sample1
# Play with main.tf and re-run to compare costs
infracost breakdown --path .
# Show diff of monthly costs, edit the yml file and re-run to compare costs
infracost diff

…

View on GitHub

dribbble shots

Wallet App Exploration

by Danar Septiawan

Payfast - Finance App Design

by Rafi Rohmat

Inputs Component

by Amirbaqian

Travigo - Travel Dashboard

by Andika Wiraputra

Tweets

Liran Tal | React and Node.js Security 🚀

@liran_tal

Here's a secret GitHub power tool

Did you know that you can navigate and create directories from within the GitHub UI if you just terminate each file with a forward slash / ? 🤯

You're welcome :-)

17:30 PM - 19 Jul 2021

Adam Argyle

@argyleink

#CSS @ counter-style

allows tying into the algorithm of the browser that creates markers / bullets!

here I define a list of happy emoji for bullets 🙂 it's cyclic too so it will use emoji from my list in a loop ♾

play around with this @CodePen:
codepen.io/argyleink/pen/…

16:27 PM - 20 Jul 2021

Josh W. Comeau

@joshwcomeau

🔥 "100vh" is a bit frustrating to use, since it doesn't factor in the dynamics of modern mobile browsers 😬

Fortunately, new units are on the way! "Long" and "short" viewport units will let us pick which size we want.

Awesome writeup by @bramus: bram.us/2021/07/08/the…

19:15 PM - 22 Jul 2021

Simon Plenderleith

@simonplend

You can use the `node:` protocol to make it clear in your code when you're importing built in @nodejs modules.

It makes it much easier to tell which modules are third-party dependencies 📦

‣ Added: v14.13.1 (ESM), v16.0.0 (CommonJS)
‣ Backported to: 12.x (v12.20.0, ESM only)

12:00 PM - 23 Jul 2021

Adam Argyle

@argyleink

CSS concatenating strings, calling functions and integrating with systems for 1 line custom list markers

13:39 PM - 25 Jul 2021

Picked Pens

Emoji List

by Adam Argyle

Modern Blog Layout with CSS Grid

by Aysenur Turk

Newton's CSS cradle

by Amit Sheen

Podcasts worth listening

Syntax – Stylelint for Linting CSS

In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should use it!

The CSS Podcast – Styling SVG in CSS

CSS and SVG are very intertwined, and you can create a lot of unique effects by combining the two. This episode dives into a few CSS + SVG tips and tricks, including where and how to use SVG on your page, icon systems, color theming, adding animations, filter effects, and more!

Thank you for reading, talk to you next week, and stay safe! 👋

Weekly Digest 28/2021 - Top of the Week

Marco Biedermann — Sun, 18 Jul 2021 21:07:45 +0000

Welcome to my Weekly Digest #28.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

🎉 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

You will receive our articles directly to your inbox 📬.

Interesting articles to read

Meta Theme Color and Trickery

Starting with Version 15, Safari supports the theme-color <meta> tag both on macOS and iOS.

Meta Theme Color and Trickery

Some great videos I watched this week

21+ Browser Dev Tools & Tips You Need To Know

The web browser is one of the most sophisticated tools on the planet. Today we look at 21 tricks, tips, and lesser-known features in Chrome Dev Tools that will make your life easier as a web developer.

by Fireship

Arrive Steering Behavior

It's finally time for me to tackle a JavaScript (p5.js) implementation of the "arrival" steering behavior from Craig Reynolds' 1999 paper Steering Behaviors For Autonomous Characters!

by Daniel Shiffman

MongoDB in 100 Seconds

MongoDB is the world’s most popular document database with powerful capabilities like full-text search, geospatial queries, data aggregation, and more.

by Fireship

Astro in 100 Seconds

Astro is an open-source tool that can build static HTML websites using popular frontend JavaScript frameworks (React, Vue, Svelte), while loading fully interactive components as needed.

by Fireship

Chrome 92 - What’s New in DevTools

by Google Chrome Developers

Useful GitHub repositories

PhoneInfoga

Information gathering & OSINT framework for phone numbers

sundowndev / phoneinfoga

Information gathering & OSINT framework for phone numbers

Advanced information gathering & OSINT framework for phone numbers

Documentation • API documentation • Demo instance • Related blog post

About

PhoneInfoga is one of the most advanced tools to scan international phone numbers using only free resources. It allows you to first gather standard information such as country, area, carrier and line type on any international phone number. Then search for footprints on search engines to try to find the VoIP provider or identify the owner.

Unofficial video tutorials

Current status

This project is stable and production-ready. Roadmap is here.

About demo instance: This is a test service. Kittens will die if you abuse it. Numverify scan is pointless because my server's IP got blocked due to spam.

Since v2 was released on March 2020, this project has been rewritten in Go language (previously Python). Why ? To improve code base, maintainability, have a stronger test…

View on GitHub

PlantUML

Generate UML diagram from textual description

plantuml / plantuml

Generate UML diagram from textual description

PlantUML

Generate UML diagram from textual description

PlantUML is a component that allows to quickly write :

And also:

Furthermore:

Hyperlinks and tooltips
Creole: rich text, emoticons, unicode, icons
OpenIconic icons
Sprite icons
AsciiMath mathematical expressions

To know more about PlantUML, please visit http://plantuml.com/

View on GitHub

web-vitals

Essential metrics for a healthy site.

GoogleChrome / web-vitals

Essential metrics for a healthy site.

`web-vitals`

Overview

The web-vitals library is a tiny (~1K), modular library for measuring all the Web Vitals metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed Insights, Search Console's Speed Report).

The library supports all of the Core Web Vitals as well as all of the other Web Vitals that can be measured in the field:

…

View on GitHub

dribbble shots

Finance Mobile App Design

by Ghulam Rasool

Task Manager - Mobile Design

by Julius Branding

Nipo Shop Kit

by Afshin T2Y

Tipping App Concept

by Conceptzilla

Food Recipe Application

by Izmahsa

Tweets

George Moller

@_georgemoller

React Patterns: Compound Component

🧵👇

18:33 PM - 13 Jul 2021

Dan

@dan_abramov

Why React Needs Keys, a short visual explanation.

Each render is like a frame in a movie. React doesn’t know *what* you did with your data. It only sees the JSX from the previous render and then from the next render.

circles.map(c => <Circle color={c.color} />)

11:56 AM - 14 Jul 2021

Andreas Storm

@avstorm

Microsoft's new Emoji system

medium.com/microsoft-desi…

14:35 PM - 15 Jul 2021

Freya Holmér

@freyaholmer

the [line] x [rectangle] intersection test can be reduced to a [line] x [line segment] test, by placing a line segment in the rectangle's diagonal based on the line direction

which is pretty neat if you ask me~

11:14 AM - 15 Jul 2021

Kitze

@thekitze

Redux flow explained visually. Looks so pretty.
cc @dan_abramov
© @vyacheslav_de

11:23 AM - 04 May 2016

Jed Bridges

@jedbridges

Gestural typographic interpolation is going to get me to finally buy an iPad

instagram.com/reel/CRZRIrPiK…

18:22 PM - 17 Jul 2021

Picked Pens

Vortex Lines

by Steve Gardner

Generative Hearts

by Lea Rosema

Podcasts worth listening

The CSS Podcast – inherit, initial, unset, and revert

This episode is about the very available CSS values inherit, initial, unset, and revert. We'll help explain what they are, what they do, and when to use them.

Syntax – React 18 - A Look Ahead

In this episode of Syntax, Scott and Wes talk about everything coming in React 18!

Thank you for reading, talk to you next week, and stay safe! 👋

Weekly Digest 27/2021 - Top of the Week

Marco Biedermann — Sun, 11 Jul 2021 17:57:20 +0000

Welcome to my Weekly Digest #27.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

🎉 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

You will receive our articles directly to your inbox 📬.

Interesting articles to read

`export default thing` is different to `export { thing as default }`

Here's how they differ, and when it matters…

export default thing is different to export { thing as default }

SVG Favicons in Action

Ever heard of favicons made with SVG? If you are a regular reader of CSS-Tricks, you probably have. But does your website actually use one? The task is

SVG Favicons in Action

npm audit: Broken by Design

Found 99 vulnerabilities (84 moderately irrelevant, 15 highly irrelevant)

npm audit: Broken by Design

Some great videos I watched this week

React's Automatic State Batching

Little known fact React batches your state state changes to result in only a single render (DOM) update. Except when it didn't, But now it does.

by Basarat

Building a Data-Backed Next.js Site with Prisma & App Platform

Chris is joined by Chris Sev from Digital Ocean to talk about their new App Platform. They're going to use it to build a little website: The site will be blog-like: Posts with IDs, titles, content, and the more dynamic bit: “likes”. They're going to use some pretty modern tech to get it done.

by Chris Coyier

Type safe GraphQL with TypeScript

When building with GraphQL you define the schema up front and this can be really handy go use when it comes to writing the queries, resolvers, etc., especially if it’s in TypeScript. So, how do you go about doing the type generation? We’ll take a look at a tool that can generate you the TypeScript types, then implement our backend using them before looking at how they can plug into the front end with React Hooks.

by Aaron Powell

Are You Making This Mistake With CSS Colors?

Every developer needs to define colors in CSS at some point and generally when a developer defines colors in CSS they use RGB or HEX to write out those colors. Technically there is nothing wrong with doing this, but it is far from the best way to write colors in CSS.

by Web Dev Simplified

VS Code tips: JSDoc links

Use @ link tags in JSDoc comments to link to symbols in your JavaScript or TypeScript project.

by Matt Bierner

Useful GitHub repositories

GitTools

This repository contains three small python/bash scripts used for the Git research.

internetwache / GitTools

A repository with 3 tools for pwn'ing websites with .git repositories available

GitTools

This repository contains three small python/bash scripts used for the Git research. Read about it here

Finder

You can use this tool to find websites with their .git repository available to the public

Usage

This python script identifies websites with publicly accessible .git repositories. It checks if the .git/HEAD file contains refs/heads.

$ ./gitfinder.py -h

###########
# Finder is part of https://github.com/internetwache/GitTools
#
# Developed and maintained by @gehaxelt from @internetwache
#
# Use at your own risk. Usage might be illegal in certain circumstances.
# Only for educational purposes!
###########

usage: gitfinder.py [-h] [-i INPUTFILE] [-o OUTPUTFILE] [-t THREADS]

optional arguments:
  -h, --help            show this help message and exit
  -i INPUTFILE, --inputfile INPUTFILE
                        input file
  -o OUTPUTFILE, --outputfile OUTPUTFILE
                        output file
  -t THREADS, --threads THREADS
                        threads

The input file should contain the targets one per line The script will output discovered domains in the form of [*]…

View on GitHub

Geist

Modern and minimalist React UI library, originating from Vercel's design.

geist-org / geist-ui

A design system for building modern websites and applications.

Modern and minimalist React UI library, originating from Vercel's design.

NOTE: This is a COMMUNITY PROJECT, not associated with Vercel.

Quick Start

run yarn add @geist-ui/core or npm i @geist-ui/core install it.
import into project:

import { GeistProvider, CssBaseline } from '@geist-ui/core'

const Application = () => (
  <GeistProvider>
    <CssBaseline /> // ---> Normalize styles
    <AppComponent /> // ---> Your App Component
  </GeistProvider>
)

Documentation

Development

Contributing Guide

Showcases

LICENSE

MIT

View on GitHub

dribbble shots

Recipe App Design

by Hadi Altaf

Furniture Landing Page

Recipe App

by Hadi Altaf

Cryptocurrency Market Landing

by Sigit Setyo Nugroho

Web Header

by Orix Agency

Marova - Virtual Art Gallery

by Zumur Deb

Tweets

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

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

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

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

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

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

Picked Pens

Generative parallelogram covering

by Zach Saucier

Podcasts worth listening

Syntax - JavaScript Event Buzzwords

In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!

Ladybug Podcast - Python

Normally, we talk about frontend development -- but there’s so many other niches within programming out there. Today we’re going to talk about Python what it’s used for, why it’s great, and how it’s different than JavaScript.

The CSS Podcast - Accessibility

Today we are breaking down accessibility related styling choices to ensure a better user experience for all of your users. These include focus visibility, keyboard navigation, and more!

Thank you for reading, talk to you next week, and stay safe! 👋

Weekly Digest 26/2021 - Top of the Week

Marco Biedermann — Sun, 04 Jul 2021 19:13:34 +0000

Welcome to my Weekly Digest #26.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

🎉 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

You will receive our articles directly to your inbox 📬.

Interesting articles to read

React Architecture: How to Structure and Organize a React Application

There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the responsibility of deciding on your own architecture.

React Architecture: How to Structure and Organize a React Application

Bear plus snowflake equals polar bear

How to preserve query parameters in React Router links

React Router makes front-end routing a breeze, but it's not always obvious how to handle query parameters.

How to preserve query parameters in React Router links

Good Meetings

Like it or not, meetings are essential to a good working environment and communication. Therefore, it’s crucial that we work on making them as productive as possible.

Good Meetings

Some great videos I watched this week

How to Create and Publish an NPM Package

Publishing a Javascript package to the NPM registry is quite easy, but there are some gotchas and things to know along the way. I'll show creating a super simple package, creating an NPM account, and then publishing a package. Then I'll go over unpublishing packages and how to publish a scoped package and why.

by Jimmy Cleveland

Three Patterns To Scale Your Microservices

Microservices have been a popular architecture choice for the last several years. Over the years we've adopted microservices architectures to ever growing set of use-cases and different development and deployment strategies. Watch this video to learn the three patterns that will help you architect better and scale your microservices apps.

Top 50+ AWS Services Explained in 10 Minutes

Amazon Web Services (AWS) is the world's largest and most complex cloud with over 200 unique services. Learn about the top 50 cloud products in just ten minutes.

by Fireship

Nodejs Nunjucks Template Injection

by John Hammond

VS Code Tips and Tricks for 2021

Watch this video to learn about all of the cool tips and tricks on how to better use the amazing VS Code in 2021.

by Harald Kirschner

4 Ways to get a competitive advantage as a frontend developer

Everyone want's to become a programmer nowadays. The market is pretty competitive already.
I work as a frontend developer for more than 10 years already and I have career advice that will give you a competitive advantage.

by Maksim Ivanov

Useful GitHub repositories

CovidPass

Web app for adding EU COVID-19 Vaccination Certificates to your wallets

covidpass-org / covidpass

Web app for adding EU COVID-19 Vaccination Certificates to your wallets

This web app offers the ability to add your EU Digital Covid Vaccination Certificates as a pass into your favorite wallet apps on iOS/watchOS or Android/wearOS. CovidPass accomplishes this without sending your data to a server and instead only uses a hashed representation for the signing step.

Getting started

If you want to add your vaccination certificate into your wallet with CovidPass, there are two main options.

Use the CovidPass web app hosted by us
Use your own Apple Developer Certificate to generate a pass

Note that the latter option requires you to have an Apple Developer Account and is a more complicated process.

Quick start

Using our service

Go to https://covidpass.marvinsextro.de
Select or scan the screenshot/PDF with the QR code
Pick a background color
Add your certificate to the wallet

Running it yourself

Note that the following options do not have support for actually converting your certificates as they…

View on GitHub

How they SRE

A curated collection of publicly available resources on how technology and tech-savvy organizations around the world practice Site Reliability Engineering (SRE)

upgundecha / howtheysre

A curated collection of publicly available resources on how technology and tech-savvy organizations around the world practice Site Reliability Engineering (SRE)

How they SRE

A curated collection of publicly available resources on how technology and tech-savvy organizations around the world practice Site Reliability Engineering (SRE)

Introduction

How They SRE is a curated knowledge repository of best practices, tools, techniques, and culture of SRE adopted by the leading technology or tech-savvy organizations.

Many organizations regularly come forward and share their best practices, tools, techniques and offer an insight into engineering culture on various public platforms like engineering blogs, conferences & meetups. The content is curated from these avenues and shared in this repository.

Note to readers: This list refers to some of the articles, posts, videos, tools, and techniques published before 2015. Please use such material with caution as there may be recent advances in technology and practices which offer better alternatives and perspectives.

Topics

Site Reliability Engineering
Hiring and Building SRE teams
SRE Culture
DevOps
Monitoring & Observability
Alerting
Incident Response…

View on GitHub

Reverse Engineering

List of awesome reverse engineering resources

wtsxDev / reverse-engineering

List of awesome reverse engineering resources

Reverse Engineering resources

A curated list of awesome reversing resources

Awesome Reversing

Books

Reverse Engineering Books

Courses

Reverse Engineering Courses

View on GitHub

dribbble shots

School Admin - Dashboard

by Muhammad Zaki Alzikri

Foodbar

by Shayan Umar

Financial Mobile App: Online Banking

by Saad Ibn Sayed

Mobile Wallet App

by Sajon

Landing Page: Furniture Store

by AR Shakir

Tweets

StackBlitz

@stackblitz

💡 Forms tip! (3)

Use `<datalist>` to enhance your forms with suggested values – not only for text inputs, but also 🧮 numbers, 📏 ranges, ✉️ emails, and even 🚦 colors!
#useThePlatform

12:46 PM - 28 Jun 2021

GitHub

@github

Meet GitHub Copilot - your AI pair programmer. copilot.github.com

14:35 PM - 29 Jun 2021

Memeloper

@iammemeloper

cat.css

.cat {
width: 100%;
height: 100%;
}

09:58 AM - 29 Jun 2021

Storybook

@storybookjs

Write test cases just once!

Mocking context, data & state for your components is much easier in Storybook.

With storybook's testing-react & testing-vue libraries you can reuse stories and all their setup with other testing tools.

ed.gr/diis4

15:55 PM - 02 Jul 2021

Addy Osmani

@addyosmani

Name your JavaScript exports! This ensures they'll show up named in DevTools and in compile time errors.

08:00 AM - 03 Jul 2021

Picked Pens

Blob study

by Liam Egan

bored

by Alex Trost

Click to open

by Amit Sheen

Podcasts worth listening

Syntax - Dev Tools Power — Elements Tab

In this episode of Syntax, Scott and Wes talk about the Dev Tools Elements Tab — all the features, and when you would use them!

The CSS Podcast - Touch interaction

Today we touch on touch interaction. Covering CSS's ability to change a user's touch experience with properties like touch-action, scroll-behavior, user-select and more.

Thank you for reading, talk to you next week, and stay safe! 👋

Weekly Digest 25/2021 - Top of the Week

Marco Biedermann — Sun, 27 Jun 2021 16:59:53 +0000

Welcome to my Weekly Digest #25 which is the last one for June.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

🎉 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

You will receive our articles directly to your inbox 📬.

Interesting articles to read

In JS functions, the 'last' return wins

An edge case has convinced me it's the 'last' return that always wins.

In JS functions, the 'last' return wins

Demystifying styled-components

For so many React devs, styled-components seems kinda magical. It isn't at all clear how it uses traditional CSS features under-the-hood, and that lack of clarity can cause real problems when things go awry. In this post, we'll learn exactly how styled-components works by building our own mini-version.

Demystifying styled-components

Why I’m super excited about Astro

Why I'm super excited about Astro (a new static site generator)

Image To Text Conversion With React And Tesseract.js

Do you have to process data manually because it is served through images or scanned documents? An image-to-text conversion makes it possible to extract text from images to automate the processing of texts on images, videos, and scanned documents. In this article, we look at how to convert an image to text with React and Tesseract.js(OCR), preprocess images, and deal with the limitations of Tesseract.

Image To Text Conversion With React And Tesseract.js (OCR) - Smashing Magazine

Some great videos I watched this week

What's New in ES2021

Every year a new version of JavaScript is released and implemented in browsers and JavaScript engines. Lets take a look at what's new this year.

by ui.dev

Google Sheets… Your Next Database?

Can you use Google Sheets as a database? Learn how to build a Next.js app using a spreadsheet as the data layer

by Fireship

Automated Lighthouse Benchmarks

Lighthouse has increasingly become a popular tool for many web developers to have the best site possible. But I've noticed that many don't realize you can automate Lighthouse benchmarks by adding them to your Continuous Integration workflow, and setting custom restrictions for performance regressions.

by Jimmy Cleveland

Flee, Pursue, Evade

Continuing my quest to explore all the steering behaviors from Craig Reynolds' 1999 paper, in this video I tackle flee, pursue, and evade.

by Daniel Shiffman

Building Strongly Typed REST Clients with Typescript

In this talk we'll use TypeScript to create a client library that works with a REST API. Come see how we create a type-safe client with tooling tailored to your service.

by Jose Manuel Heredia Hidalgo

Test Kitchen: A Recipe for Good Tests

In this talk, Iris will walk through a hand full of properties good tests have, show how we can write tests that follow these guidelines in JavaScript, and discuss when to consider bending the rules a bit.

by Iris Schaffer

Useful GitHub repositories

Data Science Cheatsheet

A helpful 5-page data science cheatsheet to assist with exam reviews, interview prep, and anything in-between.

aaronwangy / Data-Science-Cheatsheet

A helpful 5-page machine learning cheatsheet to assist with exam reviews, interview prep, and anything in-between.

Data Science Cheatsheet 2.0

A helpful 5-page data science cheatsheet to assist with exam reviews, interview prep, and anything in-between. It covers over a semester of introductory machine learning, and is based on MIT's Machine Learning courses 6.867 and 15.072. The reader should have at least a basic understanding of statistics and linear algebra, though beginners may find this resource helpful as well.

Inspired by Maverick's Data Science Cheatsheet (hence the 2.0 in the name), located here.

Topics covered:

Linear and Logistic Regression
Decision Trees and Random Forest
SVM
K-Nearest Neighbors
Clustering
Boosting
Dimension Reduction (PCA, LDA, Factor Analysis)
Natural Language Processing
Neural Networks
Recommender Systems
Reinforcement Learning
Anomaly Detection
Time Series
A/B Testing

This cheatsheet will be occasionally updated with new/improved info, so consider a follow or star to stay up to date.

Future additions (ideas welcome):

~~Time Series~~ Added!
~~Statistics and Probability~~ Added!
Data Imputation
Generative Adversarial…

View on GitHub

iPod.js

An iPod Classic that connects to Apple Music and Spotify. Built with React & Styled Components

tvillarete / ipod-classic-js

An iPod Classic emulator that connects to Apple Music and Spotify. Built with React & Styled Components

by Tanner Villarete | LinkedIn | Website

Before the days of streaming services, we relied on physical devices to store our limited libraries of music. Now with the streaming age, we no longer rely on physical storage and have endless hours of songs at our disposal. This project is an homage to the good 'ol days. A mix of the old and new. Experience the iPod Classic you used to own that now connects to Spotify and Apple Music — the two most popular music streaming platforms in the world.

I built this thing to be very extensible – to the point where it can even run games (like brick!). In the future I might consider adding a few more little apps and easter eggs (theming?).

✨ Features

Configured for Vercel
Next.js 14
React 18
Styled Components 6
Framer Motion 10
Spotify Web Playback SDK
Apple MusicKit JS

All SVGs…

View on GitHub

Slidev

Presentation Slides for Developers

slidevjs / slidev

Presentation Slides for Developers

Presentation slides for developers 🧑‍💻👩‍💻👨‍💻

Video Preview | Documentation

Made possible by my Sponsor Program 💖

Features

📝 Markdown-based - foucus on content and use your favorite editor
🧑‍💻 Developer Friendly - built-in code highlighting, live coding, etc.
🎨 Themable - theme can be shared and used with npm packages
🌈 Stylish - on-demand utilities via UnoCSS.
🤹 Interactive - embedding Vue components seamlessly
🎙 Presenter Mode - use another window, or even your phone to control your slides
🎨 Drawing - draw and annotate on your slides
🧮 LaTeX - built-in LaTeX math equations support
📰 Diagrams - creates diagrams using textual descriptions with Mermaid.js
🌟 Icons - access to icons from any icon set directly
💻 Editor - integrated editor, or the VSCode extension
🎥 Recording - built-in recording and camera view
📤 Portable - export into PDF, PNGs, or PPTX
⚡️ Fast - instant…

View on GitHub

dribbble shots

Bubble - Mobile App Design

by Outcrowd

Pet Supplies Shopping App.

by Yi Li

Electric Scooter Banner Design

by Ghulam Rasool

Medicine Reminder App

by Farrel Paperpillar

Shoplon | E-commerce UI Kit

by Sepide Moqadasi

Recipe App

by Arya Wijaya Kusuma

Tweets

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

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

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

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

Picked Pens

Creating Generative Grid Layouts With Quadtrees

by George Francis

Multi Colored Text with CSS

by Shireen Taj

Podcasts worth listening

Junior to Senior - Developer Relations Program Manager at Google

David and Erin discuss having a mindset of learning with joy, being comfortable with asking 'dumb' questions, and defining clear goals

Syntax - CSRF Explained

In this Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)!

The CSS Podcast - is(), :where(), & nesting

In this episode, Adam and Una explore some CSS syntactic sugar! They discuss the :is and :where functions, how they differ, and how they’re paving the way for nesting.

Thank you for reading, talk to you next week, and stay safe! 👋

Weekly Digest 24/2021 - Top of the Week

Marco Biedermann — Sun, 20 Jun 2021 17:01:34 +0000

Welcome to my Weekly Digest #24.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

🎉 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

You will receive our articles directly to your inbox 📬.

Interesting articles to read

The Beauty of FizzBuzz in CSS

In this CSS implementation of FizzBuzz, we can generate beautiful patterns with math!

The Beauty of FizzBuzz in CSS | Lara Schenck

CSS for Web Vitals

This article covers CSS-related techniques for optimizing Web Vitals.

CSS for Web Vitals

Inherit, initial, unset, revert

Today we’re going to take a quick look at a few special CSS keywords you can use on any CSS property: inherit, initial, revert, and unset. Also, we will ask where and when to use them to the greatest effect, and if we need more of those keywords.

Inherit, initial, unset, revert - ppk

Inline Styles as Classes

If you’re abhorred by using inline styles, just move that style to the class attribute! And then make sure you have CSS in place that, ya know, does what it says on the box.

Inline Styles as Classes (lol) | CSS-Tricks

Useful and Useless Code Comments

Unfortunately, many comments are not particularly helpful. The most common reason is that comments repeat the code: all of the information in the comment can easily be deduced from the code next to the comment.

Useful and Useless Code Comments

A Complete Guide To Accessibility Tooling

Learning to build accessible websites can be a daunting task for those who are just starting to implement accessible practices. We’ve pulled together a wide range of accessibility tooling, ranging from single-use bookmarklets to full-blown applications, in order to help you get started with building more accessible websites.

A Complete Guide To Accessibility Tooling - Smashing Magazine

Some great videos I watched this week

Pie Charts in React with visx

Using visx, the low-level visualization library from Airbnb, we'll create a cool looking Pie Chart that resembles the beautiful one that the Exodus wallet has.

by Leigh Halliday

What’s new in React 18

Understand the top new features coming to React 18, explained simply.

by Arnaud

Five Essential Design Patterns in Typescript

Jack is going to "do it live!" as he brings you five essential Design Patterns, from the GoF book, in Typescript, live, as you get to ask questions along the way!

by Jack Herrington

How to Find and Remove Dead CSS

Ever have old CSS styles pile up that you're afraid to remove because you're not sure if anything else is depending on them? Here's one way to get more confidence about which styles are actually unused and safe to delete, by using combining the code coverage results for each page on your website.

by Justin Searls

Seeking a Target

This video explores Craig Reynolds' formula for Steering Behaviors in JavaScript (p5.js) beginning with "Seeking a Target.

by Daniel Shiffman

Useful GitHub repositories

Fig

Fig adds autocomplete to your terminal. ****As you type, Fig pops up subcommands, options, and contextually relevant arguments in your existing terminal on macOS.

withfig / autocomplete

Fig adds autocomplete to your terminal.

Fig adds autocomplete to your terminal.

As you type, Fig pops up subcommands, options, and contextually relevant arguments in your existing terminal on macOS.

👋 Add a completion spec for a CLI tool

Want to add autocomplete to a CLI tool (or make changes to an existing autocomplete spec)? We welcome contributions!

Completion specs are defined in a declarative schema that specifies subcommands, options and arguments. Suggestions are generated from information in the spec or can be generated dynamically by running shell commands or reading local files.

For documentation and tutorials, visit fig.io/docs

To request autocomplete for a CLI tool, open an issue.

😎 Get Started

Build your first spec in 3 or less min: fig.io/docs/getting-started

Prerequisites:

Early access to the Fig macOS app.

If you don't have access yet, sign up for the waitlist and say you're interested in building completions!

Node and NPM…

View on GitHub

ni

Use the right package manager

antfu/ni

Modern Unix

A collection of modern/faster/saner alternatives to common unix commands.

ibraheemdev / modern-unix

A collection of modern/faster/saner alternatives to common unix commands.

Modern Unix

`bat`

A cat clone with syntax highlighting and Git integration.

`exa`

A modern replacement for ls.

`lsd`

The next gen file listing command. Backwards compatible with ls.

`delta`

A viewer for git and diff output

`dust`

A more intutive version of du written in rust.

`duf`

A better df alternative

`broot`

A new way to see and navigate directory trees

`fd`

A simple, fast and user-friendly alternative to find.

`ripgrep`

An extremely fast alternative to grep that respects your gitignore

`ag`

A code searching tool similar to ack, but faster.

`fzf`

A general purpose command-line fuzzy finder.

`mcfly`

Fly through your shell history. Great Scott!

`choose`

A human-friendly and fast alternative to cut and (sometimes) awk

`jq`

sed for JSON data.

`sd`

An intuitive find & replace CLI (sed alternative).

`cheat`

Create and view interactive cheatsheets on the command-line.

`tldr`

A…

View on GitHub

Google TypeScript Style

gts is Google's TypeScript style guide, and the configuration for our formatter, linter, and automatic code fixer. No lint rules to edit, no configuration to update, no more bike shedding over syntax.

google / gts

☂️ TypeScript style guide, formatter, and linter.

gts

Google TypeScript Style

To borrow from standardjs:

No configuration. The easiest way to enforce consistent style in your project. Just drop it in.
Automatically format code. Just run gts fix and say goodbye to messy or inconsistent code.
Catch style issues & programmer errors early. Save precious code review time by eliminating back-and-forth between reviewer & contributor.
Opinionated, but not to a fault. We recommend you use the default configuration, but if you need to customize compiler or linter config, you can.

Under the covers, we use eslint to enforce the style guide and provide automated fixes, and prettier to re-format code.

Getting Started

The easiest way to get started is to…

View on GitHub

dribbble shots

Cake App

by Arya Wijaya Kusuma

OYOTEE - Plant Shop Website

by Maulana Farhan

Blog App - UI Design

by Sayyid Ahsan

Spotify for Artists Fan Study Pitch

by Ben Cline

Tweets

Adam Argyle

@argyleink

`scrollBy()`
for *relative* scroll position adjustments, like little scroll mutator calls

MDN 🤓
scrollTo developer.mozilla.org/en-US/docs/Web…
scrollBy developer.mozilla.org/en-US/docs/Web…

18:47 PM - 14 Jun 2021

Jordan Staniscia 🔥

@jordanstaniscia

What I've been working on the past few months announced today: The new @stripe Payment Element.

stripe.com/docs/payments/…

16:51 PM - 16 Jun 2021

Pedro Duarte

@peduarte

Collision and position 🤯

Showing off the @radix_ui menu logic

Next up: Select 👀

10:12 AM - 17 Jun 2021

Adam Argyle

@argyleink

Virtual Keyboard API 😍

"developers can use [virtual keyboards] to enable better customization of their webpage's content and experiences."

```js
navigator.virtualKeyboard.overlaysContent = true
```

```css
env(keyboard-inset-height)
```

learn more 🔎 github.com/MicrosoftEdge/…

15:53 PM - 17 Jun 2021

George Moller

@_georgemoller

💡Did you know you can customize the header color of the mobile browser?

18:56 PM - 18 Jun 2021

Adam Argyle

@argyleink

make taps 300ms faster with 1 line of CSS:

```#css
touch-action: manipulation;
```

means:
element doesn't want double-tap to zoom

result:
browser *immediately* responds to taps instead of waiting 300ms for a "potential" 2nd tap 🤓

caniuse (YES!) caniuse.com/mdn-css_proper…

13:33 PM - 18 Jun 2021

Picked Pens

3D Modern House

by Ricardo Oliva Alonso

Loki – Intro text animation

by Eduardo Allegrini

Rage

by Tiffany Choong

Podcasts worth listening

Syntax - What is SvelteKit?

In this Hasty Treat, Scott and Wes talk about SvelteKit — what it is and why you might want to use it.

The CSS Podcast - Custom properties

Custom properties, aka CSS variables, are runtime dynamic variables which allow you to store loose or typed values. They're free, super fast, improve code legibility, unlock powers, are reachable with JavaScript, animateable, overall super fun and, well, kind of complex.

Smashing Podcast - What is Image Optimization in 2021?

We’re talking about Image Optimization. What steps should we follow for performant images in 2021? Drew McLellan talks to expert Addy Osmani to find out.

CodePen Radio - Andy and Una from Google’s Learn CSS Project

Learn CSS is a very cool project from a whole team of people at Google (and outside). It does a great job of documenting where is right now, in a fairly comprehensive way.

Junior to Senior - Maintainer of the JavaScript Octokit

David and Gregor discuss building and maintaining open-source software, how to be a valuable asset to your team, and growing through communication.

Thank you for reading, talk to you next week, and stay safe! 👋

Make sure to subscribe to our newsletter 💌 to receive our weekly recap directly on your email and react to this post to automatically participate in our giveaway 🎁

If you would like to join our discussions, you can find us on Discord 📣.

Weekly Digest 23/2021 - Top of the Week

Marco Biedermann — Sun, 13 Jun 2021 17:12:06 +0000

Welcome to my Weekly Digest #23.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

🎉 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

You will receive our articles directly to your inbox 📬.

Interesting articles to read

How to create NFTs with JavaScript

Learn to code an NFT (non-fungible token) using the Ethereum blockchain, the Ropsten Testnet, and a series of JavaScript libraries.

How to create NFTs with JavaScript - LogRocket Blog

Serving sharp images to high density screens

Why compressing images for dense screens is different, and how to serve them.

Serving sharp images to high density screens

How to update nested state in React

State is a cornerstone of React components. In this post, we learn how to update nested state properties.

How to update nested state in React

Media Queries in Times of @container

With container queries now on the horizon - will we need media queries at all?

Media Queries in Times of @container

Some great videos I watched this week

Automating Tests with Jest

When I think about Continuous Integration, one of the first things that comes to my mind is testing. It's amazing how much more confident you can be about changes to your codebase when you have a good suite of tests, and you know they run before every merge.

by Jimmy Cleveland

How to use TypeScript on big projects

We met with Nikita Kabardin, who works as a front-end developer at Spotify. He also worked on several Battlefield projects.

by Maksim Ivanov

Thinking on ways to solve color schemes

In today’s GUI challenge, we’re building dark, light and dim color schemes with HSL. The CSS works across modern browsers, establishes foundational architecture for more themes, and is accessible.

by Adam Argyle

Hasura in 100 Seconds

Learn how Hasura can instantly turn your SQL database into a GraphQL API.

by Fireship

Self-Avoiding Walk

It's finally time to attempt a Self-Avoiding Walk! In this video, I quickly visualize a simple JavaScript p5.js implementation of a self-avoiding walk. I then tackle the more complex problem of backtracking to find a solution to a space-filling self-avoiding walk.

by Daniel Shiffman

Useful GitHub repositories

React 18 Working Group

This is the working group for React 18 release. It was formed to provide support to the community through the release.

reactwg / react-18

Workgroup for React 18 release.

React 18 Working Group

This is the working group for React 18 release. It was formed to provide support to the community through the release. The working group is focused around online conversations which you can access by going to the GitHub Discussions tab.

The working group is currently structured to help manage discussions yet make the information available to everyone. If you're looking for the first discussion to read, Introducing React 18 is a good starting point.

Working group participants come from a representative set of the React community including educators, developers, and library authors. Participants can start GitHub discussions to ask questions and provide feedback on React 18. They can also comment on existing discussion threads. All discussions are public and available for everyone to follow along.

To learn more about the React 18 Working Group and its mission, check out The Plan for React 18.

View on GitHub

React Hook Form

Performant, flexible and extensible forms with easy-to-use validation.

react-hook-form / react-hook-form

📋 React Hooks for form state management and validation (Web + React Native)

Get started | API | Form Builder | FAQs | Examples

Features

Built with performance, UX and DX in mind
Embraces native HTML form validation
Out of the box integration with UI libraries
Small size and no dependencies
Support Yup, Zod, AJV, Superstruct, Joi and others

Install

npm install react-hook-form

Quickstart

import { useForm } from 'react-hook-form';
function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p

…

View on GitHub

Prisma

Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server & SQLite

prisma / prisma

Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB

Prisma

Quickstart • Website • Docs • Examples • Blog • Discord • Twitter

What is Prisma?

Prisma is a next-generation ORM that consists of these tools:

Prisma Client: Auto-generated and type-safe query builder for Node.js & TypeScript
Prisma Migrate: Declarative data modeling & migration system
Prisma Studio: GUI to view and edit data in your database

Prisma Client can be used in any Node.js or TypeScript backend application (including serverless applications and microservices). This can be a REST API, a GraphQL API, a gRPC API, or anything else that needs a database.

The Prisma ORM can also further be extended with these Prisma products:

Prisma Accelerate: Global database cache with scalable connection pooling
Prisma Pulse: Real-time database events with type-safe subscriptions
Prisma Optimize: AI-powered query optimization and performance insights
Prisma Studio: A visual editor for the data in your database

…

View on GitHub

cuid

Collision-resistant ids optimized for horizontal scaling and binary search lookup performance.

paralleldrive / cuid

Collision-resistant ids optimized for horizontal scaling and performance.

cuid

Collision-resistant ids optimized for horizontal scaling and binary search lookup performance.

Status: Deprecated due to security. Use Cuid2, instead.

Note: All monotonically increasing (auto-increment, k-sortable), and timestamp-based ids share the security issues with Cuid. V4 UUIDs and GUIDs are also insecure because it's possible to predict future values of many random algorithms, and many of them are biased, leading to increased probability of collision. Likewise, UUID V6-V8 are also insecure because they leak information which could be used to exploit systems or violate user privacy. Here are some example exploits:

Unauthorized password reset via guessable ID

Unauthorized access to private GitLab issues via guessable ids

Unauthorized password reset via guid

Original Documentation Follows

Currently available for Node, browsers, Java, Ruby, .Net, Go, and many other languages (see ports below — more ports are welcome).

cuid() returns a short random string with some collision-busting measures. Safe to use as…

View on GitHub

dribbble shots

Fleet – Travel Shopping UI Kit

by Tran Mau Tri Tam

Podcast Dashboard

by Umar Aji Pratama

Fashion Store Mobile App

by Andri.

Music Mobile App

by Didarul islam

Instax - Mobile App Design

by Anastasia Marinicheva

Cargo Transportation Application Design

by RD UX/UI

Tweets

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

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

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

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

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

Picked Pens

Bringing text to life

by Kyle Shook

Podcasts worth listening

The CSS Podcast - Scroll timeline

In this episode we deep dive the experimental Scroll Animations spec to bring you the breakdown on @scroll-timeline powered CSS animation. Learn about scroll-linked animations vs scroll-triggered animations and how to orchestrate scroll interactions with elements of the page.

Syntax - Making a Vaccine Bot with JavaScript

In this Hasty Treat, Scott and Wes talk about Wes' experiment building a vaccine bot!

Hasty Treat - Making a Vaccine Bot with JavaScript

3 Minutes with Kent - Prisma is amazing

The Changelog - Exploring Deno Land

This week we’re joined by Ryan Dahl, Node.js creator, and now the creator of Deno - a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

CodePen Radio - Pattern Library

Stephen and Chris talk about cplibrary the Pattern Library that the CodePen Monorepo can use to share components. What goes in there and what doesn’t? What are common and not-so-common components? Can components be combinations of other components?

Thank you for reading, talk to you next week, and stay safe! 👋

Make sure to subscribe to our newsletter 💌 to receive our weekly recap directly on your email and react to this post to automatically participate in our giveaway 🎁

If you would like to join our discussions, you can find us on Discord 📣.

Tools to Speed Up - Super Powers For Devs 🦸

Lorenzo — Tue, 18 May 2021 12:45:24 +0000

Hello World! We all know that developers love going faster, saving time for the real fun, so Today I have for you a compilation of cool and useful tools to save you time as a developer 😉. I don't want to steal too much time from you for useless things, so this list will boil down to the essentials. Name, the superpower it gives you, what it does and a presentational video. Let's go!

Hey, do you want a free javascript cheat sheet and resource compilation? Grab that here

--> Full version of the article here

Quod Ai - Super Speed

Smarter search for Git repositories

Auto-search code, experts & impact in your repositories from Github/JIRA issues. Setup in 1-click. Powered by AI.

--> Personally Recommended

Grepper - Flight

The Query & Answer System for the Ambitious Developer

Develop faster, master your code, understand more, grow in your career. Accrue code answers to common coding problems, find code answers without thinking - using Greppers “code problem” search engine.

Stack Overflow - Know everything 😉

Helping developers and technologists write the script of the future

No Description needed, I hope.

Article No Longer Available

Tabnine - Supersenses

Code faster with AI completions

Tabnine is the world’s leading AI code completion tool, trusted by over 1 million developers in all programming languages.

Notion - Mind-control

All-in-one workspace

One tool for your whole team. Write, plan, and get organized. Notion helps students, teams, enterprises, and startups grow.

Slack - Mind-to-mind communication

Slack makes it downright pleasant to work together

Slack is the collaboration hub that brings the right people, information, and tools together to get work done. From Fortune 100 companies to corner markets, millions of people around the world use Slack to connect their teams, unify their systems, and drive their business forward.

Discord - Mind-to-mind communication for gamers

Create an invite-only place where you belong

Imagine a place where you can belong to a school club, a gaming group, or a worldwide art community. Where just you and handful of friends can spend time together. A place that makes it easy to talk every day and hang out more often.

Stack Overflow For Teams - Telepathy

Knowledge sharing and collaboration without distractions

Stack Overflow for Teams is a knowledge management & collaboration solution that technologists already trust.

Trello - Ability to locate things mentally

Trello helps teams move work forward

Collaborate, manage projects, and reach new productivity peaks. From high rises to the home office, the way your team works is unique—accomplish it all with Trello.

Miro - Illusions

Where teams get work done

The online collaborative whiteboard platform to
bring teams together, anytime, anywhere.

Figma - Advanced Illusions

Minds meeting minds is how great ideas meet the world

Figma brings your teams together to design better products from start to finish.

Carbon - Elasticity

Create and share beautiful images of your source code

You know all of those code screenshots you see on Twitter? Although the code's usually impressive, we thought there was room for improvement in the aesthetic department. So what are you waiting for? Go try it out and impress all your developer and designer friends. 🎨

Unsplash - Energy Manipulation

The internet’s source of freely-usable images. Powered by creators everywhere.

Over 2 million free high-resolution images brought to you by the world’s most generous community of photographers. Unsplash is internet’s source of freely usable images.

Codepen - Self-liquification

👋 CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating online code editor for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.

Repl - Self-duplication

Code, create, and learn together

Use our free, collaborative, in-browser IDE to code in 50+ languages — without spending a second on setup.

Dev Hints - Intangibility

Hey! I'm @rstacruz and this is a modest collection of cheatsheets I've written.

My note - Don't trust the tagline, the collection is awesome

Dev Docs - Absorbing someone else’s powers

DevDocs combines multiple developer documentations in a clean and organized web UI with instant search, offline support, mobile version, dark theme, keyboard shortcuts, and more.

JSON formatter - Density control

JSON Formatter and JSON Validator help to format and validate your JSON text. It also provides a tree view that helps to navigate your formatted JSON data.

Can I use - Telekinesis

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Gradient Magic - Magnetic forces

A Free Gallery of Fantastic and Unique CSS Gradients

Gradient Magic is the largest gallery of CSS Gradients on the web, with new and exciting gradients added all the time.

Bonuses:

Mobile Apps

1 - Programming Hub
2 - SoloLearn
3 - Mimo
4 - Programiz
5 - Enki

Article No Longer Available

Top Google Chrome Extensions For Devs

Quod Ai → Automatically show source code search suggestions and context from Github or JIRA issues for productive software development
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 - Vinium → The Hacker's Browser. Vimium provides keyboard shortcuts for navigation and control in the spirit of Vim.

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

Top Google Chrome Extensions For Devs 🔥🚀

Lorenzo for World In Dev ・ Mar 7 '21

#showdev #productivity #career #webdev

Terminal Commands

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

Terminal Cheat Sheet 🔥 - The most useful terminal commands 🚀

Lorenzo for World In Dev ・ Mar 13 '21

#webdev #javascript #bash #productivity

Resource list to learn Math

1 - Khan academy
2 - The EDx Math courses
3 - IXL Math Courses
4 - I practice Math
5 - School Yourself
6 - Essentials of Linear Algebra - Youtube

Finally - How to understand math - Awesome resource list 🚀

Lorenzo for World In Dev ・ Mar 30 '21

#productivity #webdev #beginners #javascript

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!

All About Switching Branch In Git 🚀

Garvit Motwani — Sat, 08 May 2021 13:35:32 +0000

Whether you're an open-source contributor, project manager, or even a normal github user for personal projects maybe, you need to know how to Switch Branches In Git.

So let's get started!!

How to create a new branch

Normally you use git checkout with a -b flag and pass a name for the branch.

If you are on the branch called master, this will be the case for you:

$ (master) git checkout -b new-branch
Switched to a new branch 'new-branch'
$ (new-branch)

How to switch to an existing branch

To switch to an existing branch, you can use git checkout but without the -b flag and pass the name of the branch you want to switch to, something like this:

(new-branch)$ git checkout master
Switched to branch 'master'
(master)$

Bonus:

There is a shortcut to return the previous branch you were in, you can just use - after git checkout

(master)$ git checkout -
Switched to branch 'new-branch'
$ (new-branch)

PLEASE FOLLOW, LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter

You should also check:

8 JavaScript Tips & Tricks That No One Teaches 🚀

Garvit Motwani ・ Apr 6 ・ 3 min read

#javascript #webdev #html #es6

250+ JS Resources to Master Programming 💥 Cheat Sheet

DevLorenzo ・ Apr 20 ・ 19 min read

#javascript #webdev #productivity #beginners

6 Python Tips & Tricks that no One Teaches 🚀🐍

Daniel Diaz ・ Apr 26 ・ 5 min read

#python #tutorial #beginners #programming

Subscribe to our newsletter

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

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

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 #career #productivity

250+ JS Resources to Master Programming 💥 Cheat Sheet

Lorenzo for World In Dev ・ Apr 20 '21

#javascript #webdev #productivity #beginners

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 #career #productivity

Article No Longer Available

8 JavaScript Tips & Tricks That No One Teaches 🚀

Garvit Motwani for World In Dev ・ Apr 6 '21

#javascript #webdev #html #es6

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

#productivity #webdev #beginners #javascript

Finally - How to understand math - Awesome resource list 🚀

Lorenzo for World In Dev ・ Mar 30 '21

#productivity #webdev #beginners #javascript

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 ❤

ES6 Cheatsheet 🔥 - All You Need 🚀

Garvit Motwani — Thu, 29 Apr 2021 13:30:55 +0000

Hey Devs, This is an all you need ES6 cheatsheet for beginners and seasoned developers!

So let's get started!!

🎉 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

--> Grab the downloadable PDF version here

Block scoping

Let

function fn () {
  let x = 0
  if (true) {
    let x = 1 // only inside this `if`
  }
}

Const

const a = 1

let is the new var. Constants work just like let, but can't be reassigned.
Check: Let and const

Backtick strings

Interpolation

const message = `Hello ${name}`

Multiline strings

const str = `
hello
world
`

Templates and multiline strings.
Check: Template strings

Binary and octal literals

let bin = 0b1010010
let oct = 0o755

Check: Binary and octal literals

New methods

New string methods

"hello".repeat(3)
"hello".includes("ll")
"hello".startsWith("he")
"hello".padStart(8) // "   hello"
"hello".padEnd(8) // "hello   " 
"hello".padEnd(8, '!') // hello!!!
"\u1E9B\u0323".normalize("NFC")

Check: New methods

Classes

class Circle extends Shape {

Constructor

  constructor (radius) {
    this.radius = radius
  }

Methods

  getArea () {
    return Math.PI * 2 * this.radius
  }

Calling superclass methods

  expand (n) {
    return super.expand(n) * Math.PI
  }

Static methods

  static createFromDiameter(diameter) {
    return new Circle(diameter / 2)
  }
}

Syntactic sugar for prototypes.
Check: Classes

Exponent operator

const byte = 2 ** 8
// Same as: Math.pow(2, 8)

Promises

Making promises

new Promise((resolve, reject) => {
  if (ok) { resolve(result) }
  else { reject(error) }
})

For asynchronous programming.
Check: Promises

Using promises

promise
  .then((result) => { ··· })
  .catch((error) => { ··· })

Using promises with finally

promise
  .then((result) => { ··· })
  .catch((error) => { ··· })
  .finally(() => { // logic independent of success/error })

The handler is called when the promise is fulfilled or rejected.

Promise functions

Promise.all(···)
Promise.race(···)
Promise.reject(···)
Promise.resolve(···)

Async-await

async function run () {
  const user = await getUser()
  const tweets = await getTweets(user)
  return [user, tweets]
}

async functions are another way of using functions.

Check: async function

Destructuring

Destructuring assignment

Arrays

const [first, last] = ['Nikola', 'Tesla']

Objects

let {title, author} = {
  title: 'The Silkworm',
  author: 'R. Galbraith'
}

Supports for matching arrays and objects.
Check: Destructuring

Default values

const scores = [22, 33]
const [math = 50, sci = 50, arts = 50] = scores

// Result:
// math === 22, sci === 33, arts === 50

Default values can be assigned while destructuring arrays or objects.

Function arguments

function greet({ name, greeting }) {
  console.log(`${greeting}, ${name}!`)
}

greet({ name: 'Larry', greeting: 'Ahoy' })

Destructuring of objects and arrays can also be done in function arguments.

Default values

function greet({ name = 'Rauno' } = {}) {
  console.log(`Hi ${name}!`);
}

greet() // Hi Rauno!
greet({ name: 'Larry' }) // Hi Larry!

Reassigning keys

function printCoordinates({ left: x, top: y }) {
  console.log(`x: ${x}, y: ${y}`)
}

printCoordinates({ left: 25, top: 90 })

This example assigns x to the value of the left key.

Loops

for (let {title, artist} of songs) {
  ···
}

The assignment expressions work in loops, too.

Object destructuring

const { id, ...detail } = song;

Extract some keys individually and remaining keys in the object using rest (...) operator

Spread

Object spread

with Object spread

const options = {
  ...defaults,
  visible: true
}

without Object spread

const options = Object.assign(
  {}, defaults,
  { visible: true })

The Object spread operator lets you build new objects from other objects.

Check: Object spread

Array spread

with Array spread

const users = [
  ...admins,
  ...editors,
  'rstacruz'
]

without Array spread

const users = admins
  .concat(editors)
  .concat([ 'rstacruz' ])

The spread operator lets you build new arrays in the same way.

Check: Spread operator

Functions

Function arguments

Default arguments

function greet (name = 'Jerry') {
  return `Hello ${name}`
}

Rest arguments

function fn(x, ...y) {
  // y is an Array
  return x * y.length
}

Spread

fn(...[1, 2, 3])
// same as fn(1, 2, 3)

Default, rest, spread.
Check: Function arguments

Fat arrows

setTimeout(() => {
  ···
})

With arguments

readFile('text.txt', (err, data) => {
  ...
})

Implicit return

numbers.map(n => n * 2)
// No curly braces = implicit return
// Same as: numbers.map(function (n) { return n * 2 })
numbers.map(n => ({
  result: n * 2
}))
// Implicitly returning objects requires parentheses around the object

Like functions but with this preserved.
Check: Fat arrows

Objects

Shorthand syntax

module.exports = { hello, bye }
// Same as: module.exports = { hello: hello, bye: bye }

Check: Object literal enhancements

Methods

const App = {
  start () {
    console.log('running')
  }
}
// Same as: App = { start: function () {···} }

Check: Object literal enhancements

Getters and setters

const App = {
  get closed () {
    return this.status === 'closed'
  },
  set closed (value) {
    this.status = value ? 'closed' : 'open'
  }
}

Check: Object literal enhancements

Computed property names

let event = 'click'
let handlers = {
  [`on${event}`]: true
}
// Same as: handlers = { 'onclick': true }

Check: Object literal enhancements

Extract values

const fatherJS = { age: 57, name: "Brendan Eich" }

Object.values(fatherJS)
// [57, "Brendan Eich"]
Object.entries(fatherJS)
// [["age", 57], ["name", "Brendan Eich"]]

Modules

Imports

import 'helpers'
// aka: require('···')

import Express from 'express'
// aka: const Express = require('···').default || require('···')

import { indent } from 'helpers'
// aka: const indent = require('···').indent

import * as Helpers from 'helpers'
// aka: const Helpers = require('···')

import { indentSpaces as indent } from 'helpers'
// aka: const indent = require('···').indentSpaces

import is the new require().
Check: Module imports

Exports

export default function () { ··· }
// aka: module.exports.default = ···

export function mymethod () { ··· }
// aka: module.exports.mymethod = ···

export const pi = 3.14159
// aka: module.exports.pi = ···

export is the new module.exports.
Check: Module exports

Generators

function* idMaker () {
  let id = 0
  while (true) { yield id++ }
}

let gen = idMaker()
gen.next().value  // → 0
gen.next().value  // → 1
gen.next().value  // → 2

It's complicated.
Check: Generators

For..of iteration

for (let i of iterable) {
  ···
}

For iterating through generators and arrays.
Check: For..of iteration

References

MDN Web Docs
DevHints
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
--> Follow me on Twitter <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

Thank you very much for reading this article.

Comment any tricks & tips you know!

PLEASE LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter

5 Array Methods You Should Know 🚀

Garvit Motwani ・ Apr 27 '21

#javascript #webdev #beginners #html

400+ JavaScript Interview Questions 🎓 With Answers 🌠

Lorenzo for World In Dev ・ Apr 27 '21

#javascript #webdev #career #productivity

6 Python Tips & Tricks that no One Teaches 🚀🐍

Daniel Diaz for World In Dev ・ Apr 26 '21

#python #tutorial #beginners #programming

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!

Thanks for reading!!

Forem: World In Dev

Weekly Digest 30/2021 – Top of the Week

🎉 Giveaway

Interesting articles to read

Creating an accessible autocomplete experience

A framework for building Open Graph images

ES2021 Features

How to test component interactions

Some great videos I watched this week

Building A Sliding Puzzle Game with a Custom Image Using ReactJS

HackTheBox "Business CTF" - discordvm - Node.js Sandbox Escape

The New Way To Debug JavaScript in VS Code

Terraform in 100 Seconds

VS Code tips: Add missing function Quick Fix for JavaScript and TypeScript

A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other

Useful GitHub repositories

GitHub Readme Stats

anuraghazra / github-readme-stats

⚡ Dynamically generated stats for your github readmes

GitHub Readme Stats

Features

GitHub Stats

Size Limit

ai / size-limit

Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.

Size Limit

dribbble shots

Node – Crypto NFT iOS UI Kit

Sign In to Account

Messenger App - Mobile Design

Course learning app ui ux

Tweets

Picked Pens

Gradient Stroke

11 Geometric Trees

Podcasts worth listening

Syntax – The Surprisingly Exciting World of Favicons

The CSS Podcast – counters and @counter-style

Syntax – ShopTalk x Syntax

The Changelog – Modern Unix tools

Weekly Digest 29/2021 – Top of the Week

🎉 Giveaway

Interesting articles to read

The Large, Small, and Dynamic Viewports

Temporal: getting started with JavaScript’s new date time API

Automatic hyphenation depends on the defined document language

Some great videos I watched this week

Performance Testing CSS-Tricks with WebPageTest

The Math behind Animations

Useful GitHub repositories

visx

airbnb / visx

🐯 visx | visualization components

visx

Usage

WiFi Card

bndw / wifi-card

📶 Print a QR code for connecting to your WiFi (wificard.io)

WiFi Card

Running locally

Development

Supported Languages

Windows 11 in React

blueedgetechno / windows11

windows 11 in react 💻🌈⚡

Windows 11 in React

Live Experience🌈: win11.blueedge.me

Gallery

Why

Features

Stack

FAQ

Infracost

infracost / infracost

Cloud cost estimates for Terraform in pull requests💰📉 Love your cloud bill!

Show full breakdown of costs

Show diff of monthly costs between current and planned state

Quick start

dribbble shots

Wallet App Exploration

`web-vitals`

`export default thing` is different to `export { thing as default }`