Skip to content

Instantly share code, notes, and snippets.

View davidaurelio's full-sized avatar
💭
I may be slow to respond.

David Aurelio davidaurelio

💭
I may be slow to respond.
View GitHub Profile
@davidaurelio
davidaurelio / dabblet.css
Last active April 17, 2023 07:44
Pixel-perfect scale
/**
* Pixel-perfect scale
*/
html {
font: 1em sans-serif;
}
form {
user-select: none;
@davidaurelio
davidaurelio / dabblet.css
Last active April 16, 2023 15:50
Pixel-perfect scale
/**
* Pixel-perfect scale
*/
.frame {
position: relative;
margin: 48px;
}
.rocketship {
@davidaurelio
davidaurelio / dabblet.css
Created March 27, 2020 07:56
Slider with filled track – gradients
/**
* Slider with filled track – gradients
*/
.slider {
height: 32px;
position: relative;
--fill-start: 0.5;
--gap: 4px;
--progress: 0.5;
@davidaurelio
davidaurelio / dabblet.css
Created March 26, 2020 23:49
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
background-image: linear-gradient(90deg, yellow 25%, transparent 25%, transparent 30%, yellow 30%),
linear-gradient(90deg, transparent 15%, gray 15%, gray 25%, transparent 25%, transparent 30%, gray 15%, gray 25%, transparent 30%);
min-height: 100%;
@davidaurelio
davidaurelio / dabblet.css
Last active March 25, 2020 16:21
Slider with filled track
/**
* Slider with filled track
*/
.slider {
height: 32px;
position: relative;
--fill-start: 0.5;
--gap: 4px;
--progress: 0.5;
function fearNotLetter(str) {
let last = str.charCodeAt(0);
for (let i = 1; i < str.length; ++i) {
const code = str.charCodeAt(i);
if (code !== last + 1) return String.fromCharCode(last + 1);
last = code;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>count bits</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
!function() {
function n() {
for (var n = arguments.length, e = Array(n), r = 0; r < n; r++) e[r] = arguments[r];
return "(s*(" + e.join(")s*,s*(") + ")s*)";
}
new RegExp("rgb" + n()), new RegExp("rgba" + n()), new RegExp("hsl" + n()), new RegExp("hsla" + n());
}();
var u = require('uglify-es');
var code = `
(function() {
var NUMBER = '[-+]?\\d*\\.?\\d+';
var PERCENTAGE = NUMBER + '%';
function call() {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
@davidaurelio
davidaurelio / container.js
Created March 4, 2015 15:07
React: custom validator for type of children
const {forEach} = React.Children;
class Child extends React.Component { /*…*/ }
class Container extends React.Component { /*…*/ }
Container.propTypes = {
children: function(props, propName, componentName) {
forEach(props[propName], (element) => {
const {type} = element;
if (type !== Child) {