Skip to content

Instantly share code, notes, and snippets.

Avatar

Laimis Petravicius Limpuls

View GitHub Profile
@vasanthk
vasanthk / System Design.md
Last active Nov 30, 2021
System Design Cheatsheet
View System Design.md

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

  1. Clarify and agree on the scope of the system
  • User cases (description of sequences of events that, taken together, lead to a system doing something useful)
    • Who is going to use it?
    • How are they going to use it?
@paulirish
paulirish / what-forces-layout.md
Last active Nov 29, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
@staltz
staltz / introrx.md
Last active Nov 29, 2021
The introduction to Reactive Programming you've been missing
View introrx.md
@hallettj
hallettj / global-variables-are-bad.js
Created Feb 14, 2009
How and why to avoid global variables in JavaScript
View global-variables-are-bad.js
// It is important to declare your variables.
(function() {
var foo = 'Hello, world!';
print(foo); //=> Hello, world!
})();
// Because if you don't, the become global variables.
(function() {
@austinhyde
austinhyde / js-observables-binding.md
Last active Sep 23, 2021
Vanilla JavaScript Data Binding
View js-observables-binding.md

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);
@luruke
luruke / smashingmagazine.js
Last active Jul 29, 2021
Source code of the demo "Improving User Flow Through Page Transitions" on Smashing Magazine.
View smashingmagazine.js
/*
https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/
You can copy paste this code in your console on smashingmagazine.com
in order to have cross-fade transition when change page.
*/
var cache = {};
function loadPage(url) {
if (cache[url]) {
View GoogleApi.js
export const GoogleApi = function(opts) {
opts = opts || {}
const apiKey = opts.apiKey;
const libraries = opts.libraries || [];
const client = opts.client;
const URL = 'https://maps.googleapis.com/maps/api/js';
const googleVersion = '3.22';
let script = null;
@technoknol
technoknol / allow-html-in-widget-title.php
Last active Apr 19, 2021
Wordpress - Allow HTML tags in Widget Title - No Plugin Required
View allow-html-in-widget-title.php
<?php
/*
* Author : TechnoKnol
* Blog : http://technoknol.blogspot.com
* Purpose : Allow HTML tags in Widget Title in WordPress
*
* */
// Add below code in your theme's functions.php file
// Allow HTML tags in Widget title
function html_widget_title( $var) {
@cpressey
cpressey / glitchtool.py
Created Apr 28, 2015
Really quick-and-dirty Python script to create glitched (intentionally corrupted) JPEGs
View glitchtool.py
#!/usr/bin/env python
# the contents of this file are in the public domain
import os
import random
import sys
def main(args):
filename = args[0]
@mocon
mocon / .bash_profile
Created May 31, 2017
Example `.bash_profile` file
View .bash_profile
# Edit this file
alias aliases="nano ~/.bash_profile" # usage: type `aliases` in Terminal
# Navigate to location
alias home="cd ~"
alias desktop="cd ~/Desktop/"
alias repos="cd ~/Documents/Repos/"
# Navigate to project directory
alias ds="clear && cd ~/Documents/Repos/design-system"