This is a collection of gists for an upcoming article on Medium.
I'll link to it when it's published.
$sides: (top, bottom, left, right); | |
$space-values: (2, 5, 10, 15, 20, 30, 40, 50, 60); | |
@each $side in $sides { | |
@for $i from 1 through length($space-values) { | |
$value: nth($space-values, $i); | |
$valuePx: #{$value}px; | |
.m-#{str-slice($side, 0, 1)}-#{$value} { |
<h1 class="m-b-40">This is important!</h1> | |
<p class="m-b-20">Did you know...</p> | |
<p class="m-b-20">You might not need jQuery.</p> | |
<p>"Just" saying.</p> |
.m-t-2 { margin-top: 2px; } | |
.m-t-5 { margin-top: 5px; } | |
.m-t-10 { margin-top: 10px; } | |
.m-t-15 { margin-top: 15px; } | |
.m-t-20 { margin-top: 20px; } | |
.m-t-30 { margin-top: 30px; } | |
.m-t-40 { margin-top: 40px; } | |
.m-t-50 { margin-top: 50px; } | |
.m-t-60 { margin-top: 60px; } | |
.m-b-2 { margin-bottom: 2px; } |
$sides: (top, bottom, left, right); | |
$space-values: (2, 5, 10, 15, 20, 30, 40, 50, 60); | |
@each $side in $sides { | |
@for $i from 1 through length($space-values) { | |
$value: nth($space-values, $i); | |
.m-#{str-slice($side, 0, 1)}-#{$value} { | |
margin-#{$side}: #{$value}px; |
This is a collection of gists for an upcoming article on Medium.
I'll link to it when it's published.
// https://codesandbox.io/s/ykmo8wp63v | |
const isNull = null; | |
const isNullNumber = 0; | |
const isUndefined = undefined; | |
const isEmptyString = ''; | |
const isNegativeNumber = -1; | |
const isEmptyArray = []; // shallow test | |
const isEmptyObject = {}; // shallow test | |
const isUndefinedString = 'undefined'; |
/* =================================== | |
* Scenario: | |
* You want to run a function but don't know when it's going to be defined. | |
* You keep checking if it's defined every 0.25 seconds. When it's defined, stop checking. | |
* | |
* Copyright (c) 2018, Wallace Sidhrée | |
* MIT License | |
====================================== */ | |
// On doc ready for modern browsers |
// Calculate chance | |
const chance = (percentage) => { | |
const probability = (percentage / 100); | |
return (Math.random() < probability ? 1 : 0); | |
}; | |
// Set percentage of possibility (10 = 10%, 75 = 75%) | |
const possibility = chance(70); | |
// Only execute it if 'possibility' is truthy | |
if (possibility) { | |
// It's possible! |
$font-fallback: arial, sans-serif; | |
$path-fonts: '../fonts'; | |
.font-defaults { | |
font-weight: normal; | |
font-style: normal; | |
-webkit-font-smoothing: antialiased; | |
} | |
@font-face { |
{ | |
"name": "your-project", | |
"version": "0.0.1", | |
[...] | |
"scripts": { | |
"build": "react-scripts build", | |
"postbuild": "./postbuild.sh", | |
[...] | |
}, | |
} |