Issue #310 (Global const, Git/CLI, Angular/jQuery, Uncats)06/27/19
Sometimes a seemingly basic programming question can stump a lot of developers. Case in point this week when Wes Bos tweeted out a really straightforward JavaScript quiz question that I got wrong and so did more than half of respondents. He asked:
What does this log?
|
const a = 1;
let b = 2;
var c = 3;
console.log(window.a, window.b, window.c);
|
Possible answers:
A) 1, 2, 3
B) undefined, 2, 3
C) undefined, undefined, 3
D) undefined, undefined, undefined
Before reading on, pick your answer. Wes's tweet is linked below, but the poll is now done, so if you view it you'll see the results, including the correct answer, but you won't be able to guess.
As many of us have learned, let and const variables, unlike var, create block level variables. So naturally, my answer was A because there's no outer block to prevent these let and const declarations from essentially being 'global'. But they still behave differently from var when declared in the top level scope – which seems to make sense. But it's something I never really considered.
After reading the various comments on the Twitter thread, and digging around, here's what MDN says on const:
"This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do not become properties of the window object, unlike var variables."
And regarding let:
"At the top level of programs and functions, let, unlike var, does not create a property on the global object."
So technically, top-level let and const declarations are still global, but just not attached to window. I'm not exactly sure why that's even necessary, but my guess is that variables were never really supposed to become properties of window in the first place, so this corrects that flaw.
Here's the Twitter poll and here's a CodePen with the code demonstrated.
Now on to this week's tools!
|
Git, GitHub, and CLI Tools
JavaScript & DOM E-Books Bundle - $12.99
A collection of 200+ JavaScript and DOM API coding tips in 3 e-books. EPUB, MOBI, and PDF formats, with 200+ interactive CodePen demos. All book code and demos now updated with ES6 syntax. promoted
git-pending
Git plugin to list TODO, FIXME, TESTME, DOCME comments in a repository.
Online Open Graph Image Generator
A quick and simple way to create a custom image as your repository's social media preview.
gitignore-it
A CLI to generate .gitignore files.
replace-in-files-cli
Replace matching strings and regexes in files.
GitHub Folder
VSCode extension to automatically create a .github folder that will contain issue template files, code owner file, and code of conduct file.
Translate Shell
Command-line translator that gives you easy access to Google Translate, Bing Translator, Yandex.Translate, etc. in your terminal.
readme-md-generator
CLI that generates beautiful README.md files.
GitHub Desktop
The native desktop GitHub client is now at version 2+ (details).
API with GitHub
Build a simple API quickly using JSON and store it in a GitHub repository.
fontinspect
Command line tool that will trace the web font usage of a particular web page.
GitHub Card
Enter a GitHub user/project to generate a GitHub repository card as SVG or PNG, embeddable as HTML or Markdown.
|
Angular and jQuery Tools
Tech Productivity
A brief weekly newsletter featuring productivity tools, articles, and resources for tech pros. promoted
jqDeclare
A jQuery plugin for building React-style declarative user interface components.
ng2-dragula
Official Angular wrapper for dragula, the popular JavaScript drag-and-drop utility.
jTable
Old project, use with caution. A jQuery plugin to create Ajax-based CRUD tables.
Angular Prettier Schematic
Add Prettier to an Angular CLI project. A Schematic that adds prettier and a pre-commit hook for formatting staged files.
angular-notifier
A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular 2+ applications.
ng-animate
A collection of cool, reusable, and flexible animations for Angular 4.2+.
ngx-admin
Admin dashboard template based on Angular 7+ and Bootstrap 4.
PrimeNG
An extensive user interface suite for Angular featuring a collection of rich UI components.
ContentBuilder.js
Now at version 3+. A generic content editor + layout builder jQuery plugin that works with or without popular CSS frameworks like Bootstrap, Foundation, etc.
NgRx
Provides reactive state management for Angular apps, inspired by Redux. Unify the events in your application and derive state using RxJS.
|
The Uncategorizables
Tech Productivity
A brief weekly newsletter for tech pros who want to get stuff done. promoted
Markeye
A previewer for Markdown files.
0x Launch Kit
Launch your own exchange or marketplace in minutes.
Caddy
Now at version 1+ (details). The HTTP/2 web server with automatic HTTPS.
themer
Takes a set of colors and generates themes for your development environment (editors, terminals, wallpapers, and more).
Markdeep
Technology for writing plain text documents that will look good in any web browser, local or remote. Supports diagrams, calendars, equations, and more as extensions of Markdown.
We Want Websites
Find and buy profitable websites from real webmasters with real traffic and earnings.
Slye
Desktop application to create web-based 3D presentations.
Updatefy
Transform Google Sheets into embeddable widgets. Minimum code required.
Compatible with any platform or website.
Arc
Unites bandwidth into a people-powered cloud network. Users see fewer ads and earn rewards. Websites make money, run faster, and reduce costs.
Nebula
YouTube-like video platform with no pre-roll ads and the ability to download for offline viewing on iOS.
|
A Tweet for Thought
Veronika Romashkina shares an animated graph showing StackOverflow programming language popularity from 2008 — 2018. Interesting to see the gradual growth of JavaScript and Python.
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
endoflife.date maintains quick links for checking EOL (End Of Life) dates for different versions of various tools and technologies (OSes, languages, etc).
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
