Skip to content

Instantly share code, notes, and snippets.

View dreamyguy's full-sized avatar
👨‍💻 Code-bending

Wallace Sidhrée dreamyguy

👨‍💻 Code-bending
View GitHub Profile
@dreamyguy
dreamyguy / sieve-of-eratosthenes.js
Created December 12, 2022 08:14
Sieves – Find all prime numbers below a given number
// See https://en.wikipedia.org/wiki/Sieve_of_Eratosthenes
function sieveOfEratosthenes(n) {
// Create a boolean array "prime[0..n]" and
// initialize all entries it as true.
// A value in prime[i] will finally be false
// if i is Not a prime, else true.
let prime = new Array(n + 1).fill(true);
// Create the Sieve
@dreamyguy
dreamyguy / ucrainize-a.js
Last active March 8, 2022 23:05
Ucrainize text
import "./ucrainize-c.css";
const colorizeText = ({ tagName, colorValues }) => {
const els = document.getElementsByTagName(tagName);
for (let el of els) {
const elText = el.innerHTML;
const elChars = elText.split("");
let newText = "";
let colorNumber = 0;
elChars.map(char => {
@dreamyguy
dreamyguy / sanity-replace-datasets.md
Created August 17, 2020 13:51
Sanity: Replace datasets (replace 'develop' with 'schema', for instance)
  1. sanity login (login with GitHub)
  2. sanity dataset export develop (accept default output, it will backup develop in a tar file)
  3. sanity dataset export schema (accept default output, it will backup schema in a tar file)
  4. sanity dataset delete develop (on prompt, type the name of the dataset to confirm delete)
  5. sanity dataset import ./schema.tar.gz develop --replace
  6. sanity graphql deploy
  7. sanity deploy
@dreamyguy
dreamyguy / ReactPositionSticky.md
Last active February 21, 2020 14:10
A React component with `position: sticky` support and fallback fot browsers that don't support it

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 December 17, 2019 11:40 — forked from ralphcrisostomo/array_dupplicate_counter.js
Javascript: Count duplicates in an array, ES6
// 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 10:39
Jump to heading - Logic behind dynamically generated IDs and their respective fragments

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 April 5, 2019 08:05
Visualising margins for UX Debugging [8 of 8]
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 April 5, 2019 08:03
Visualising margins for UX Debugging [7 of 8]
$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 April 5, 2019 08:03
Visualising margins for UX Debugging [6 of 8]
$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 March 28, 2019 21:40
Visualising margins for UX Debugging [5 of 8]
<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>