Skip to content

Instantly share code, notes, and snippets.

View adi518's full-sized avatar
🌴
On vacation

Adi adi518

🌴
On vacation
View GitHub Profile
@buren
buren / cross-origin-local-storage.js
Created November 1, 2017 10:21
Cross origin local storage sharing example (using an iframe and postMessage)
const CrossOriginLocalStorage = function(currentWindow, iframe, allowedOrigins, onMessage) {
this.allowedOrigins = allowedOrigins;
let childWindow;
// some browser (don't remember which one) throw exception when you try to access
// contentWindow for the first time, it works when you do that second time
try {
childWindow = iframe.contentWindow;
} catch(e) {
childWindow = iframe.contentWindow;
@faressoft
faressoft / dom_performance_reflow_repaint.md
Last active May 6, 2024 06:11
DOM Performance (Reflow & Repaint) (Summary)

DOM Performance

Rendering

  • How the browser renders the document
    • Receives the data (bytes) from the server.
    • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
    • Turns tokens into nodes.
    • Turns nodes into the DOM tree.
  • Builds CSSOM tree from the css rules.
@luciopaiva
luciopaiva / _Full-socketio-client-and-server-example.md
Last active April 27, 2024 04:09
Full socket.io client and server example

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:

// Current Persons Data Structure in Client
const clientData = [{
id: 1,
employed: true
},
{
id: 2,
employed: false
},
@MWins
MWins / project-ideas01.md
Last active June 12, 2024 02:55
Back end Projects - list

Project Ideas

Ok. I'm going to list off some ideas for projects. You will have to determine if any particular idea is good enough to include in a portfolio. These aren't creative ideas. They likely already exist. Some are way too advanced while others are simplistic.

I will recommend to post any project you make to github and make a github project page for it. Explain in as much detail as possible how you made it, how it can be improved etc. Document it.

If you pick an advanced idea, setup a development roadmap and follow it. This will show some project management skills.

Another piece of advice for those who are design challenged. Use different front end frameworks and use different themes for those frameworks to provide appealing designs without looking like yet another bootstrap site.

@brauliodiez
brauliodiez / readme.md
Last active June 3, 2024 09:57
lodash/fp set and flow

lodash/fp - set / flow

In this gist we are going to learn about basic goodies that we get from the library lodash/fp (fp stands for functional programming, great for ensuring immutability).We'll learn just by doing (step by step guided sample + codepens).

We'll cover lodash set and flow functions

Steps

  • We'll use codepen as our playground, navigate to this page:
@jayphelps
jayphelps / package.json
Last active May 11, 2024 00:29
TypeScript output es2015, esm (ES Modules), CJS, UMD, UMD + Min + Gzip. Assumes you install typescript (tsc), rollup, uglifyjs either globally or included as devDependencies
{
"scripts": {
"build": "npm run build:es2015 && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:umd:min",
"build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
"build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
"build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
"build:umd": "rollup dist/esm/index.js --format umd --name YourLibrary --sourceMap --output dist/umd/yourlibrary.js",
"build:umd:min": "cd dist/umd && uglifyjs --compress --mangle --source-map --screw-ie8 --comments --o yourlibrary.min.js -- yourlibrary.js && gzip yourlibrary.min.js -c > yourlibrary.min.js.gz",
}
}
@NoamELB
NoamELB / index.scss
Last active October 20, 2018 22:25
tabs example
@import "../../../../SASS/lib/core";
@import "../../Cards/Card/mixins";
.tabs {
padding: 0;
border: $constants-border;
border-radius: 8px;
.tabs_header {
display: flex;
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
@urish
urish / javascript-iot-tapas.md
Last active December 8, 2017 08:30
JavaScript IoT Tapas Resources