Skip to content

Instantly share code, notes, and snippets.

View alanrsoares's full-sized avatar

Alan Soares alanrsoares

307 followers · 137 following
View GitHub Profile
@alanrsoares
alanrsoares / ring-mixin.ts
Last active August 15, 2024 11:34
import { css } from "styled-components";
/**
* Represents an RGB color as a string in the format `rgb(${number},${number},${number})`
* or as a tuple of numbers `[number, number, number]`.
*/
type RGB = `rgb(${number},${number},${number})` | [number, number, number];
/**
* Props for the `ring` mixin.
@alanrsoares
alanrsoares / HSLGenerator.js
Last active September 2, 2020 00:49
HSL color generator with bilinear interpolation
class HSLGenerator {
constructor(hueLength = 100, options = { lightness: 0.6, saturation: 1 }) {
this.hueIncrement = 360 / Math.sqrt(hueLength ** 2 * 2);
this.saturation = options.saturation * 100;
this.lightness = options.lightness * 100;
this.cache = {};
}
getColor(y, x) {
const cacheKey = [y, x].join("-");
@alanrsoares
alanrsoares / multiplication.js
Last active June 27, 2019 00:06
Multiplication with no multiplication, using range reduce
const isInt = n => parseInt(n) === n;
const toPrecisionN = precision => value =>
Number(value.toPrecision(precision));
function multiplyInt(a, b) {
const iterable = [...Array(Math.abs(Math.floor(a)))];
return iterable.reduce(
acc => a < 0
@alanrsoares
alanrsoares / multiplication.js
Created June 26, 2019 10:41
Multiplication with no multiplication, using range reduce
const isInt = n => parseInt(n) === n;
const toPrecisionN = precision => n =>
Number((n).toPrecision(precision));
function multiplyInt(a, b) {
const iterable = [...new Array(Math.abs(Math.floor(a)))];
return iterable.reduce(
acc => a < 0
? acc - b
@alanrsoares
alanrsoares / micro-router-parser.js
Last active March 5, 2019 09:56
Micro router for js
class Router {
routes = {}
baseUrl = ""
constructor(baseUrl) {
this.baseUrl = baseUrl
}
register = (method) => {
@alanrsoares
alanrsoares / index.html
Last active October 23, 2018 23:53
linear color interpolation -> JS Bin// source https://jsbin.com/vukayi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
#app {
font-family: 'Courier'
}
@alanrsoares
alanrsoares / index.html
Last active October 9, 2017 20:54
JS Bin - Flow-typed Immutable Matrix data structure // source http://jsbin.com/vuyexi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
@alanrsoares
alanrsoares / index.html
Created October 9, 2017 20:52
JS Bin grouping dynamically generated datasets // source http://jsbin.com/netulis
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="grouping dynamically generated datasets">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.24.1/ramda.min.js"></script>
@alanrsoares
alanrsoares / index.html
Created October 9, 2017 20:50
JS Bin a vanilla js + html & css analog clock // source http://jsbin.com/goyemuzabi
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="a vanilla js + html & css analog clock">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
<style id="jsbin-css">
body {
@alanrsoares
alanrsoares / redux-without-redux.js
Created June 21, 2017 02:53
class Observable {
constructor(value) {
this.value = value
this.events = { change: [] }
}
update(updateFn) {
this.value = updateFn(this.value)
this.events.change.forEach(fn => fn(this.value))
}