Skip to content

Instantly share code, notes, and snippets.

Avatar
🐢
I may be slow to respond.

Lucio Paiva luciopaiva

🐢
I may be slow to respond.
View GitHub Profile
@luciopaiva
luciopaiva / Storing data in HTML elements.md
Last active Jun 3, 2017
Storing data in HTML elements
View Storing data in HTML elements.md

See this jsPerf test.

The most performant way to store data related to a certain element is to use a Map. Besides being the fastest, it also allows you to store arbitraty data. Using dataset and data-* attributes only allow for string values.

@luciopaiva
luciopaiva / wait-for-dom-content-loaded.js
Last active Jul 24, 2017
Javascript snippet to asynchronously detect when DOM is loaded
View wait-for-dom-content-loaded.js
class SampleApp() {
constructor () {
this.pageLoadingPromise = null;
}
waitForDomContentLoaded() {
if (!this.pageLoadingPromise) {
// this is the first time; prepare the promise
this.pageLoadingPromise = new Promise(resolve => {
@luciopaiva
luciopaiva / ajax.js
Created May 3, 2018
Javascript: AJAX helper functions
View ajax.js
async function getJson(url) {
return JSON.parse(await getFile(url));
}
async function getFile(url) {
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.addEventListener("load", function () {
try {
resolve(this.responseText);
@luciopaiva
luciopaiva / sleep.js
Created May 3, 2018
Javascript: sleep()
View sleep.js
/**
* Asynchronously sleep for the specified amount of time.
* @param {Number} millis
* @return {Promise}
*/
function sleep(millis) {
return new Promise(resolve => setTimeout(resolve, millis));
}
@luciopaiva
luciopaiva / example.js
Last active May 4, 2018
Javascript: range() and range2d()
View example.js
// will print numbers from 0 to 19
for (const x of range(20)) {
console.info(x);
}
// will print
// 0 0
// 1 0
// 0 1
// 1 1
@luciopaiva
luciopaiva / CSS Flexbox notes.md
Last active May 6, 2018
CSS Flexbox notes.md
View CSS Flexbox notes.md

Quick Guide to Flexbox

Flex container

display: flex;
flex-direction: row | column;
/* main axis alignment: */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
/* cross axis alignment: */
align-items: flex-start | flex-end | center | baseline | stretch;
@luciopaiva
luciopaiva / .banner
Last active May 7, 2018
Helpful bash additions
View .banner
_ _
| | (_)
| |_ _ ___ _ ___
| | | | |/ __| |/ _ \
| | |_| | (__| | (_) |
|_|\__,_|\___|_|\___/
View ssh config key selection issues.md

Example .ssh/config file:

# severals rules that depend on the wildcard rule at the bottom

Host foo.com
    HostName foo.com
    User foo
    IdentityFile /path/to/id-1
@luciopaiva
luciopaiva / async-experiments.js
Created Jun 10, 2018
Async Javascript experiments
View async-experiments.js
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
/**
* Shows how a timer fails to execute when we block the main thread. See `setIntervalDoesNotWorkWithBlockingWait()` for
* a solution to this.
* @returns {void}
*/
View file-drop-zone.js
class FileDropZone {
/**
* @param {HTMLElement|String} dropZoneElement
*/
constructor (dropZoneElement) {
dropZoneElement = typeof dropZoneElement === "string" ? document.getElementById(dropZoneElement) : dropZoneElement;
dropZoneElement.addEventListener("drop", this.onDrop.bind(this));
dropZoneElement.addEventListener("dragover", event => event.preventDefault());