Skip to content

Instantly share code, notes, and snippets.

robinrendle /
Last active Jan 17, 2021
Getting set up with Browsersync and Webpack

Fixing our local environment with Browsersync

Whenever we change our templates we still have to use our build script and this can get annoying. Thankfully with webpack-dev-server and BrowserSync we can fix this:

npm i -D browser-sync browser-sync-webpack-plugin webpack-dev-server

BrowserSync will act like a proxy, waiting for webpack to do its thing and then reloading the browser for us.

View lock-unlock-scroll.js
function lock_scroll(){
// lock scroll position, but retain settings for later
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that'scroll-position', scrollPosition);'previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
dtomasi / default
Last active Jun 2, 2021
Brew Nginx PHP7
View default
server {
listen 80;
server_name localhost;
root /Users/YOUR_USERNAME/Sites;
access_log /Library/Logs/default.access.log main;
location / {
include /usr/local/etc/nginx/conf.d/php-fpm;
View vanilla-lazy-load.html
.item {width:300px; display: inline-block; }
.item .itemtitle {font-weight:bold; font-size:2em;}
.hidden {display:none;}
<h1>Amalgam Comics Characters</h1>
niksumeiko /
Last active Jun 20, 2021
Disable HTML form input autocomplete and autofill

Disable HTML Form Input Autocomplete and Autofill

  1. Add autocomplete="off" onto <form> element;
  2. Add hidden <input> with autocomplete="false" as a first children element of the form.
<form autocomplete="off" method="post" action="">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
bivainis / sanfrancisco-font.css
Last active Apr 18, 2019
San Francisco Web Font
View sanfrancisco-font.css
/** Ultra Light */
@font-face {
font-family: "San Francisco";
font-weight: 100;
src: url("");
telekosmos / uniq.js
Last active May 31, 2021
Remove duplicates from js array (ES5/ES6)
View uniq.js
var uniqueArray = function(arrArg) {
return arrArg.filter(function(elem, pos,arr) {
return arr.indexOf(elem) == pos;
var uniqEs6 = (arrArg) => {
return arrArg.filter((elem, pos, arr) => {
return arr.indexOf(elem) == pos;
dandelany / gist:1ff06f4fa1f8d6f89c5e
Last active Mar 24, 2021
Recursively cloning React children
View gist:1ff06f4fa1f8d6f89c5e
var RecursiveChildComponent = React.createClass({
render() {
return <div>
recursiveCloneChildren(children) {
return, child => {
if(!_.isObject(child)) return child;
var childProps = {someNew: "propToAdd"};
tbranyen /
Last active Jun 8, 2021
OpenWeatherMap / Weather Icons integration
  1. Include Weather Icons in your app:

  2. Include the below JSON in your application, for example purposes, lets assume it's a global named weatherIcons.

  3. Make a request to OpenWeatherMap:

req = $.getJSON(',uk&callback=?');
addyosmani /
Last active Jun 9, 2021 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version