Skip to content

Instantly share code, notes, and snippets.

@marocas
marocas / useScroll.ts
Created October 19, 2021 22:03 — forked from gusfune/useScroll.ts
Custom React hook for listening to scroll events
import { useState, useEffect } from "react"
type SSRRect = {
bottom: number
height: number
left: number
right: number
top: number
width: number
x: number
console.log(Number(Math.round(1.005 + "e2") + "e-2")) // 1.01
const roundAccurately = (number, decimalPlaces) => Number(Math.round(number + "e" + decimalPlaces) + "e-" + decimalPlaces)
console.log(roundAccurately(1.005, 2)) // 1.01
@marocas
marocas / es7-async-await.js
Created February 5, 2020 11:00
Javascript fetch JSON with ES7 Async Await
// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/
// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch
// async function
async function fetchAsync () {
// await response of fetch call
let response = await fetch('https://api.github.com');
// only proceed once promise is resolved
let data = await response.json();
// only proceed once second promise is resolved
// List all directories in Node.js recursively in a synchronous fashion
var allDirectoriesSync = (dir, fileList) => {
let filelist = fileList || []
const directories = readdirSync(dir)
directories.map(file => {
const filePath = `${dir}/${file}`
const isDirectory = statSync(filePath).isDirectory() && existsSync(filePath)
// List all files in a directory in Node.js recursively in a synchronous fashion
var walkSync = function(dir, filelist) {
if( dir[dir.length-1] != '/') dir=dir.concat('/')
var fs = fs || require('fs'),
files = fs.readdirSync(dir);
filelist = filelist || [];
files.forEach(function(file) {
if (fs.statSync(dir + file).isDirectory()) {
@marocas
marocas / mixin_fluid_type.scss
Created May 26, 2019 16:27
Sass Fluid Typography
//- Mixin: Fluid Type
///
/// Magic calc + vh to allow text to be fluid between minimum
/// and maximum breakpoints.
///
/// @group typography
/// @param {variable} $min-font-size [12px] - Minimum font size
/// @param {variable} $max-font-size [24px] - Maximum font size
/// @param {variable} $lower-range [420px] - Stop scaling font smaller at this screen resolution
/// @param {variable} $upper-range [900px] - Stop scaling font larger at this screen resolution
@marocas
marocas / getFullYear.js
Last active June 8, 2018 16:05
get current year
$('.spanYear').html(new Date().getFullYear());
@marocas
marocas / gitflow-breakdown.md
Created April 11, 2018 09:49 — forked from JamesMGreene/gitflow-breakdown.md
A comparison of using `git flow` commands versus raw `git` commands.

Initialize

gitflow git
git flow init git init
  git commit --allow-empty -m "Initial commit"
  git checkout -b develop master

Connect to the remote repository

source ~/.profile
if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi
parse_git_branch() { git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/' }
export PS1="\[\033[3;31m\]\u\[\033[m\]@\[\033[33;1m\]\h:\[\033[32m\]\w\[\033[m\]\$(parse_git_branch) \n > "
export CLICOLOR=1
export LSCOLORS=ExFxBxDxCxegedabagacad
@marocas
marocas / SassMeister-input-HTML.html
Created May 24, 2017 13:41 — forked from qiu8310/SassMeister-input-HTML.html
Generated by SassMeister.com.
<div class="root en">
<ul class="links">
<li class="link">
<a class="link-home"><i class="icon">tag</i>HOME</a>
</li>
<li class="link">
<a class="link-about"><i class="icon">tag</i>ABOUT</a>
</li>
</ul>