Skip to content

Instantly share code, notes, and snippets.

@robinrendle
robinrendle / browsersync-webpack.md
Last active Jan 17, 2021
Getting set up with Browsersync and Webpack
View browsersync-webpack.md

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
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
@dtomasi
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
<html>
<head>
<style>
.item {width:300px; display: inline-block; }
.item .itemtitle {font-weight:bold; font-size:2em;}
.hidden {display:none;}
</style>
</head>
<body>
<h1>Amalgam Comics Characters</h1>
@niksumeiko
niksumeiko / disable-html-form-input-autocomplete-autofill.md
Last active Jun 20, 2021
Disable HTML form input autocomplete and autofill
View disable-html-form-input-autocomplete-autofill.md

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
bivainis / sanfrancisco-font.css
Last active Apr 18, 2019
San Francisco Web Font
View sanfrancisco-font.css
/**
* http://applemusic.tumblr.com/
*/
/** Ultra Light */
@font-face {
font-family: "San Francisco";
font-weight: 100;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2");
}
@telekosmos
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
dandelany / gist:1ff06f4fa1f8d6f89c5e
Last active Mar 24, 2021
Recursively cloning React children
View gist:1ff06f4fa1f8d6f89c5e
var RecursiveChildComponent = React.createClass({
render() {
return <div>
{this.recursiveCloneChildren(this.props.children)}
</div>
},
recursiveCloneChildren(children) {
return React.Children.map(children, child => {
if(!_.isObject(child)) return child;
var childProps = {someNew: "propToAdd"};
@tbranyen
tbranyen / _usage.md
Last active Jun 8, 2021
OpenWeatherMap / Weather Icons integration
View _usage.md
  1. Include Weather Icons in your app: https://github.com/erikflowers/weather-icons

  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('http://api.openweathermap.org/data/2.5/weather?q=London,uk&callback=?');
@addyosmani
addyosmani / README.md
Last active Jun 9, 2021 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger
View README.md

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