Skip to content

Instantly share code, notes, and snippets.

💭
👨‍💻 Code-bending

Wallace Sidhrée dreamyguy

💭
👨‍💻 Code-bending
Block or report user

Report or block dreamyguy

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@dreamyguy
dreamyguy / jump-to-heading.md
Last active May 28, 2019
Jump to heading - Logic behind dynamically generated IDs and their respective fragments
View jump-to-heading.md

Linking to ALL headings

1. Identify all headings in a page, on page load

2. Generate a string out of each heading text

  • Should be URL-friendly as it will be part of a URL.
  • Should not start with a number as it would be an invalid id.
  • Should be sanitized with unique values at the end (-1, -2) in case there are one or more headings with the same text. To keep it as clean as possible we should do this only when duplicates are detected. (We cannot use random string generators like uuid as the links would not be the same when visiting the page again).
  • Should be generated by a function that's properly tested with normal and edge-case scenarios, which always gives us what we expect. The generated id/fragment should always be the same given we give it the same input.
@dreamyguy
dreamyguy / visualising-margins-for-ux-debugging_h.js
Last active Apr 5, 2019
Visualising margins for UX Debugging [8 of 8]
View visualising-margins-for-ux-debugging_h.js
function getUrlParam(param, url) {
let theUrl = url;
if (!url) {
theUrl = location.href;
}
const theParam = param.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
const regexLogic = `[\\?&]${theParam}=([^&#]*)`;
const regex = new RegExp(regexLogic);
const results = regex.exec(theUrl);
return results === null ? null : results[1];
@dreamyguy
dreamyguy / visualising-margins-for-ux-debugging_g.scss
Last active Apr 5, 2019
Visualising margins for UX Debugging [7 of 8]
View visualising-margins-for-ux-debugging_g.scss
$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
dreamyguy / visualising-margins-for-ux-debugging_f.scss
Last active Apr 5, 2019
Visualising margins for UX Debugging [6 of 8]
View visualising-margins-for-ux-debugging_f.scss
$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
dreamyguy / visualising-margins-for-ux-debugging_e.html
Last active Mar 28, 2019
Visualising margins for UX Debugging [5 of 8]
View visualising-margins-for-ux-debugging_e.html
<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
dreamyguy / visualising-margins-for-ux-debugging_d.scss
Last active Apr 5, 2019
Visualising margins for UX Debugging [4 of 8]
View visualising-margins-for-ux-debugging_d.scss
$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
dreamyguy / visualising-margins-for-ux-debugging_c.html
Last active Mar 28, 2019
Visualising margins for UX Debugging [3 of 8]
View visualising-margins-for-ux-debugging_c.html
<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
dreamyguy / visualising-margins-for-ux-debugging_b.css
Last active Apr 5, 2019
Visualising margins for UX Debugging [2 of 8]
View visualising-margins-for-ux-debugging_b.css
.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
dreamyguy / visualising-margins-for-ux-debugging_a.scss
Last active Apr 5, 2019
Visualising margins for UX Debugging [1 of 6]
View visualising-margins-for-ux-debugging_a.scss
$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
dreamyguy / _visualising-margins-for-ux-debugging.md
Last active Mar 28, 2019
Visualise CSS margins for debugging - activated through a URL parameter and shareable through a link
View _visualising-margins-for-ux-debugging.md

This is a collection of gists for an upcoming article on Medium.

I'll link to it when it's published.

You can’t perform that action at this time.