Skip to content

Instantly share code, notes, and snippets.

@austinhyde
austinhyde / js-observables-binding.md
Last active January 7, 2025 08:27
Vanilla JavaScript Data Binding

Observables

You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5

setN(10);

@ericelliott
ericelliott / essential-javascript-links.md
Last active June 14, 2025 18:43
Essential JavaScript Links
@bobbygrace
bobbygrace / trello-css-guide.md
Last active May 12, 2025 16:46
Trello CSS Guide

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets


Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

@paulirish
paulirish / bling.js
Last active May 26, 2025 20:31
bling dot js
/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };
@RuGa
RuGa / massInsertOrUpdate.php
Last active December 11, 2024 23:14
Mass (bulk) insert or update on duplicate for Laravel 4/5
/**
* Mass (bulk) insert or update on duplicate for Laravel 4/5
*
* insertOrUpdate([
* ['id'=>1,'value'=>10],
* ['id'=>2,'value'=>60]
* ]);
*
*
* @param array $rows
@tabacitu
tabacitu / gist:dbcfd71375e72c857474
Last active April 20, 2020 09:05
Tabacitu Laravel Package Service Provider boilerplate code
<?php
namespace League\Skeleton;
use Illuminate\Support\ServiceProvider;
use Illuminate\Routing\Router;
class SkeletonServiceProvider extends ServiceProvider
{
/**
@nhagen
nhagen / PromisAllWithFails.js
Last active November 15, 2022 18:11
Wait until all promises have completed even when some reject, with Promise.all
var a = ["sdfdf", "http://oooooolol"],
handleNetErr = function(e) { return e };
Promise.all(fetch('sdfdsf').catch(handleNetErr), fetch('http://invalidurl').catch(handleNetErr))
.then(function(sdf, invalid) {
console.log(sdf, invalid) // [Response, TypeError]
})
.catch(function(err) {
console.log(err);
})
@PurpleBooth
PurpleBooth / README-Template.md
Last active July 19, 2025 10:47
A template to make good README.md

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

@paulirish
paulirish / what-forces-layout.md
Last active July 19, 2025 12:35
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent