amysimmons

Advanced JavaScript Learning Resources

This is a list of advanced JavaScript learning resources from people who responded to this [Tweet][13] and this [Tweet][20].

• [You Don't Know JS][3]

• [Frontend Masters courses by Kyle Simpson][12]

• [@mpjme][6]'s [YouTube videos][5]

lucasfais

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T	go to file
⌘⌃P	go to project
⌘R	go to methods
⌃G	go to line
⌘KB	toggle side bar
⌘⇧P	command prompt

mikowl

// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

//  Remove any duplicates from an array of primitives.
const unique = [...new Set(arr)]

// Sleep in async functions. Use: await sleep(2000).
const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
// or
const sleep = util.promisify(setTimeout);

lttlrck

git branch -m old_branch new_branch         # Rename branch locally    
git push origin :old_branch                 # Delete the old branch    
git push --set-upstream origin new_branch   # Push the new branch, set local branch to track the new remote

TheRealFlyingCoder

So you want to set up remix in cloud run huh? It's pretty simple but i'm going to assume you can figure out most of the GCP UI on your own.

Cloud Run:
Step 1: Create a new service and take note of the service ID
Step 2: Allow all traffic in the /triggers tab

Cloud Build:
Step 1: Set up a Cloud Build trigger on your repo
Step 2: Point the configuration to "cloud build configuration file" at the root of your project
Step 3: Add the following to the substitution variables (so you can keep it safe):

ijy

<!--
    CHECK IF A STRING IS NULL OR EMPTY
--> 

<!-- Example XML -->
<group> 
    <item> 
        <id>item 1</id> 
        <CategoryName>blue</CategoryName> 
    </item> 

padolsey

// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
//     ie === undefined
// If you're in IE (>=5) then you can determine which version:
//     ie === 7; // IE7
// Thus, to detect IE:
//     if (ie) {}

gasman

#!/usr/bin/env ruby -w

# pnginator.rb: pack a .js file into a PNG image with an HTML payload;
# when saved with an .html extension and opened in a browser, the HTML extracts and executes
# the javascript.

# Usage: ruby pnginator.rb input.js output.png.html

# By Gasman <http://matt.west.co.tt/>
# from an original idea by Daeken: http://daeken.com/superpacking-js-demos

Warry

How to make faster scroll effects?

• Avoid too many reflows (the browser to recalculate everything)
• Use advanced CSS3 for graphic card rendering
• Precalculate sizes and positions

Beware of reflows

The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:

codler

/*! Prefix flex for IE10 and Safari / iOS in LESS
* https://gist.github.com/codler/2148ba4ff096a19f08ea
* Copyright (c) 2014 Han Lin Yap http://yap.nu; MIT license */

.display(@value) when (@value = flex) {
	display: -ms-flexbox; // IE10
	display: -webkit-flex; // Safari / iOS
}

.display(@value) when (@value = inline-flex) {