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 / ReactPositionSticky.md
Last active Feb 21, 2020
A React component with `position: sticky` support and fallback fot browsers that don't support it
View ReactPositionSticky.md

React Position Sticky

I needed a component that would provide the following:

  • Native position: sticky, if supported
  • position: sticky fallback for older browsers, like IE11
  • Support for children to be passed down as props

So I came up with the following:

@dreamyguy
dreamyguy / array_dupplicate_counter.js
Last active Dec 17, 2019 — forked from ralphcrisostomo/array_dupplicate_counter.js
Javascript: Count duplicates in an array, ES6
View array_dupplicate_counter.js
// Scenario:
// You have a javascript array that likely has some duplicate values and you would like a count of those values.
const compressArray = arr => {
const compressed = [];
// make a copy of the input array
const copy = arr.slice(0);
// first loop goes over every element
for (let i = 0; i < arr.length; i++) {
let myCount = 0;
@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; }
You can’t perform that action at this time.