This is a collection of gists for an upcoming article on Medium.
I'll link to it when it's published.
dreamyguy
/ visualising-margins-for-ux-debugging_d.scss
Last active
April 5, 2019 08:03
Visualising margins for UX Debugging [4 of 8]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $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} { |
dreamyguy
/ visualising-margins-for-ux-debugging_c.html
Last active
March 28, 2019 21:33
Visualising margins for UX Debugging [3 of 8]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
dreamyguy
/ visualising-margins-for-ux-debugging_b.css
Last active
April 5, 2019 08:02
Visualising margins for UX Debugging [2 of 8]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; } |
dreamyguy
/ visualising-margins-for-ux-debugging_a.scss
Last active
April 5, 2019 08:02
Visualising margins for UX Debugging [1 of 6]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $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; |
dreamyguy
/ _visualising-margins-for-ux-debugging.md
Last active
March 28, 2019 15:58
Visualise CSS margins for debugging - activated through a URL parameter and shareable through a link
dreamyguy
/ classic-value-test[shallow].js
Last active
March 29, 2019 11:05
Classic value test. Shallow, not checking type nor diving into prototype.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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'; |
dreamyguy
/ wait-for-function.js
Last active
February 12, 2019 10:29
For when you want to run a function but don't know when it's going to be defined. Keep checking until you WIN!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* =================================== | |
| * 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $font-fallback: arial, sans-serif; | |
| $path-fonts: '../fonts'; | |
| .font-defaults { | |
| font-weight: normal; | |
| font-style: normal; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| @font-face { |
dreamyguy
/ package.json
Last active
January 7, 2023 08:54
Custom build output folder when using create-react-app with postbuild
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "your-project", | |
| "version": "0.0.1", | |
| [...] | |
| "scripts": { | |
| "build": "react-scripts build", | |
| "postbuild": "./postbuild.sh", | |
| [...] | |
| }, | |
| } |