Skip to content

Instantly share code, notes, and snippets.

Avatar

Josh Moncrieff monners

  • Bueno Systems
  • Melbourne
View GitHub Profile
@monners
monners / RenderCount
Created Jun 25, 2020
Component that counts and displays the number of times it has been rendered.
View RenderCount
import React from 'react'
import styled from 'styled-components'
export default function RenderCount() {
const renders = React.useRef(0)
return <Circle>{++renders.current}</Circle>
}
const size = 30
@monners
monners / gist:330f8c59b5fbfc9b140b10d948ce5263
Created Aug 18, 2017
Basic scrollLock class for mobile menus
View gist:330f8c59b5fbfc9b140b10d948ce5263
class ScrollLock {
constructor () {
this.pageBody = document.querySelector('.body');
this.scrollY = 0;
}
saveScrollY = (num) => {
this.scrollY = num;
}
@monners
monners / promise_example.js
Created Jan 23, 2017
Promise creation example
View promise_example.js
function ajaxRequest (url, cb) {
setTimeout(() => {
cb({ height: 1000, width: 500});
}, 2000)
}
const p = new Promise((res, rej) => {
ajaxRequest('url', (data) => {
res(data);
})
@monners
monners / 0_reuse_code.js
Created Jan 23, 2017
Here are some things you can do with Gists in GistBox.
View 0_reuse_code.js
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
View Flexbox-grid-extended
// Disabling the linter on this for now.
// scss-lint:disable SelectorFormat
// NOTE: Inactive to avoid potential conflicts - We might use this later in the Consumer project rebuild
// .container-fluid,
// .container {
// margin-right: auto;
// margin-left: auto;
// }
//
@monners
monners / makeObjectIterable.js
Created Mar 25, 2016
Utility function for making Objects iterable
View makeObjectIterable.js
function makeObjectIterable (obj) {
obj[Symbol.iterator] = function *() {
let properties = Object.keys(this);
for (let p of properties) {
yield this[p];
}
}
return obj;
}
@monners
monners / preferences.sublime-settings
Created Sep 17, 2015
Sublime user preferences file
View preferences.sublime-settings
{
"color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme",
"folder_exclude_patterns":
[
".svn",
".git",
".hg",
"CVS",
"node_modules",
"dist"
@monners
monners / Default (OSX).sublime-keymap
Created Sep 17, 2015
User keymap for sublime text 3 setup
View Default (OSX).sublime-keymap
[
{ "keys": ["ctrl+e"], "command": "move_to", "args": {"to": "eol", "extend": false} },
{ "keys": ["ctrl+a"], "command": "move_to", "args": {"to": "bol", "extend": false} },
{ "keys": ["ctrl+shift+a"], "command": "move_to", "args": {"to": "bol", "extend": true} },
{ "keys": ["ctrl+k"], "command": "move", "args": {"by": "subword_ends", "forward": true} },
{ "keys": ["ctrl+j"], "command": "move", "args": {"by": "subwords", "forward": false} },
{ "keys": ["ctrl+shift+j"], "command": "move", "args": {"by": "subwords", "forward": false, "extend": true} },
{ "keys": ["ctrl+shift+k"], "command": "move", "args": {"by": "subword_ends", "forward": true, "extend": true} },
{ "keys": ["super+p"], "command": "show_overlay", "args": {"overlay": "command_palette"} },
{ "keys": ["ctrl+super+p"], "command": "swap_line_up" },
@monners
monners / basic-responsive-images.js
Last active Sep 9, 2015
A super basic responsive images and lazy load module
View basic-responsive-images.js
/* jshint browser: true, debug: true */
'use strict';
// EXAMPLE USAGE CALL:
//
// init({
// baseUrl: 'data-img-desktop', // will be used as largest, AND default if no other responsive tags are used
// responsive: [ // Array of breakpoint objects
// {
// breakpoint: 1024,
View simple-parallax-fade.js
/* jshint browser: true */
'use strict';
var viewportWidth = window.innerWidth || document.body.clientWidth;
var parallaxRange = 130; // How far the background moves from its starting position
var backgroundImages = [].slice.call(document.querySelectorAll('.bannerlax .banner-image'));
var content = [].slice.call(document.querySelectorAll('.bannerlax .banner-heading'));
You can’t perform that action at this time.