Skip to content

Instantly share code, notes, and snippets.

View Posandu's full-sized avatar
🎯
Focusing

Posandu Mapa Posandu

🎯
Focusing
View GitHub Profile
@gre
gre / easing.js
Last active May 17, 2024 03:33
Simple Easing Functions in Javascript - see https://github.com/gre/bezier-easing
/*
* This work is free. You can redistribute it and/or modify it under the
* terms of the Do What The Fuck You Want To Public License, Version 2,
* as published by Sam Hocevar. See the COPYING file for more details.
*/
/*
* Easing Functions - inspired from http://gizma.com/easing/
* only considering the t value for the range [0, 1] => [0, 1]
*/
EasingFunctions = {
anonymous
anonymous / float2rat.js
Created January 18, 2013 23:15
JavaScript function to convert a floating point number into a ratio with the help of some continued fractions.
function float2rat(x) {
tolerance = 1.e-4;
h1=1; h2=0;
k1=0; k2=1;
b = x;
do {
a = Math.floor(b);
aux = h1; h1 = a*h1+h2; h2 = aux;
aux = k1; k1 = a*k1+k2; k2 = aux;
b = 1/(b-a);
@tkon99
tkon99 / name.js
Last active April 19, 2024 14:38
Random Name Generator for Javascript
/*
(c) by Thomas Konings
Random Name Generator for Javascript
*/
function capFirst(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function getRandomInt(min, max) {
@jevgen
jevgen / float2rat.js
Created January 19, 2017 18:18 — forked from anonymous/float2rat.js
JavaScript function to convert a floating point number into a ratio with the help of some continued fractions.
function float2rat(x) {
tolerance = 1.e-4;
h1=1; h2=0;
k1=0; k2=1;
b = x;
do {
a = Math.floor(b);
aux = h1; h1 = a*h1+h2; h2 = aux;
aux = k1; k1 = a*k1+k2; k2 = aux;
b = 1/(b-a);
@primaryobjects
primaryobjects / css-comparison.csv
Last active August 7, 2023 13:16
A comparison of CSS library sizes.
Name Version Size (uncompressed) Size (minified) Size (gzipped) URL
Bootstrap v3.3.7 143 KB 117 KB 20 KB http://getbootstrap.com/css/
Bootstrap v4.0.0 187 KB 147 KB 20 KB https://v4-alpha.getbootstrap.com/
Materialize v3.0 114 KB 90 KB 18 KB http://materializecss.com/
Material Design Lite v1.3.0 350 KB 137 KB 21 KB https://getmdl.io/
mini.css v2.1 47 KB 36 KB 7 KB https://chalarangelo.github.io/mini.css/
Semantic UI v2.2.6 730 KB 550 KB 95 KB https://semantic-ui.com/
Foundation v3.0 90 KB 64 KB 12 KB http://foundation.zurb.com/
Pure CSS v0.6.2 80 KB 17 KB 3.8 KB https://purecss.io/
Picnic CSS v6.3.2 55 KB 38 KB 7 KB https://picnicss.com
@davidpiesse
davidpiesse / tailwind_md_all_colours.js
Last active May 29, 2024 13:07
A colour set for Tailwind CSS that include all Material Design Colours, shades, accents and contrast colours
// https://davidpiesse.github.io/tailwind-md-colours/
//
//Notes
//
//All colours are generated from Material Design Docs
//Colours have a base, a set of shades (50-900) accent colours
//In addition a companion set of contrast colours are included for colouring text / icons
// Example usage
// class="w-full bg-red-600 text-red-600-constrast"
@idevwise
idevwise / focusLoopingUtil.js
Last active October 19, 2022 16:58
Utility to loop focus inside a DOM element
/**
* Selectors for all focusable elements
* @type {string}
*/
const FOCUSABLE_ELEMENT_SELECTORS = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, [tabindex="0"], [contenteditable]';
const KEY_CODE_MAP = {
TAB: 9
};
@Rich-Harris
Rich-Harris / what-is-svelte.md
Last active March 27, 2024 06:09
The truth about Svelte

I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.

But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.

Svelte is a language.

Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?

A few projects that have answered this question:

@JoeyBurzynski
JoeyBurzynski / 55-bytes-of-css.md
Last active May 15, 2024 20:11
58 bytes of css to look great nearly everywhere

58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}
@Posandu
Posandu / discord-color-palette.js
Last active August 19, 2022 10:01
Discord colors
const red = {
50: "#ffebee",
100: "#ffcdd2",
200: "#ef9a9a",
300: "#e57373",
400: "#ef5350",
500: "#f44336",
600: "#e53935",
700: "#d32f2f",
800: "#c62828",