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_g.scss
Last active
April 5, 2019 08:03
Visualising margins for UX Debugging [7 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_f.scss
Last active
April 5, 2019 08:03
Visualising margins for UX Debugging [6 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_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_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
/ 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
/ visualising-margins-for-ux-debugging_e.html
Last active
March 28, 2019 21:40
Visualising margins for UX Debugging [5 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>Did you know…</p> | |
| <p class="m-t-10 m-b-20">You might not need jQuery.</p> | |
| <p class="">"Just" saying.</p> |
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.md
Last active
March 28, 2019 15:58
Visualise CSS margins for debugging - activated through a URL parameter and shareable through a link
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 |