Skip to content

Instantly share code, notes, and snippets.

Avatar
🏝️
On vacation

Lucio Paiva luciopaiva

🏝️
On vacation
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 / index.css
Last active May 3, 2021
Read/write CSS variable in Javascript
View index.css
:root {
--app-width: 1000px;
--some-calculation: calc(var(--app-width) + 1);
}
@luciopaiva
luciopaiva / _Full-socketio-client-and-server-example.md
Last active Jun 10, 2022
Full socket.io client and server example
View _Full-socketio-client-and-server-example.md

Full socket.io client and server example

Last updated: 2021-02-21, tested with socket.io v3.1.1

This is the simplest implementation you will find for a client/server WebSockets architecture using socket.io.

To see a full explanation, read my answer on SO here: https://stackoverflow.com/a/24232050/778272.

If you're looking for examples using frameworks, check these links:

@luciopaiva
luciopaiva / .banner
Last active May 7, 2018
Helpful bash additions
View .banner
_ _
| | (_)
| |_ _ ___ _ ___
| | | | |/ __| |/ _ \
| | |_| | (__| | (_) |
|_|\__,_|\___|_|\___/
@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 / 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 / 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;

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