Skip to content

Instantly share code, notes, and snippets.

View pocketjoso's full-sized avatar

Jonas Ohlsson Aden pocketjoso

View GitHub Profile
@pocketjoso
pocketjoso / gruntfile.js
Last active September 17, 2017 13:55
Critical css for PHP sites using grunt-penthouse (could use Penthouse's node module to exact same effect)
// gruntfile.js
-----------------------
// make sure you're actually running a php server locally first!
// Output a critical css file in same folder with same name as php file, just add '.css' extensions
// This makes it super easy to find from php.
penthouse: {
work : {
css : 'pathToMyFullCss.css',
url : 'localhost:8000/work/index.php',
outfile : 'work/index.php.css',
@pocketjoso
pocketjoso / AuthenticationProtector.js
Last active August 30, 2017 16:48
AuthenticationProtector HOC breaks HMR due to always re-mounted - why?
import React, { Component } from 'react'
import { connect } from 'react-redux'
// USING this component breaks our HMR - it does reload but local state is lost;
// due to that _this_ component always remounts - why?
// this is a SIMPLIFIED example of our
// HOC component for guarding access to Pages;
// heavily inspired by:
// https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a#e85f
@pocketjoso
pocketjoso / scroll-into-view-scroll-handler.js
Last active August 9, 2017 13:24
Comparing scroll position to element in scroll handler
import throttle from 'lodash.throttle'
function handleScroll () {
// get the updated scroll position
const yOffset = window.pageYOffset
// compare to the cached pixel value when we want to reveal the element
if (yOffset > this.scrollIntoViewThreshold) {
// now reveal the element!
}
}
@pocketjoso
pocketjoso / getElementOffset.js
Last active August 9, 2017 12:58
getElementOffset in JavaScript
// calcule the offset in pixels to top of the site,
// from a DOM element (el)
export default function getElementOffset(el) {
let top = 0
let left = 0
// grab the offset of the element relative to it's parent,
// then repeat with the parent relative to it's parent,
// ... until we reach an element without parents.
do {
@pocketjoso
pocketjoso / clean-css-bug
Created November 15, 2015 12:13
clean-css 3.4.3 merging bug
import CleanCSS from 'clean-css'
const before = `
.hidden,
.visible-xs {
display: none!important;
}
@media (max-width:767px) {
.visible-xs {
.sr-only,img{border:0}button,h2{color:inherit}.btn,img{vertical-align:middle}.modal,a{outline:0}.btn,.text-center,header{text-align:center}.btn,button{cursor:pointer}.navbar-fixed-top .navbar-collapse{max-height:340px}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:10px;-webkit-tap-highlight-color:transparent}header,nav,section{display:block}a{background-color:transparent}b{font-weight:700}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}button{margin:0;font:inherit;overflow:visible;text-transform:none;-webkit-appearance:button;font-family:inherit;font-size:inherit;line-height:inherit}button::-moz-focus-inner{padding:0;border:0}.btn,.navbar-toggle{background-image:none}body{margin:0;background-color:#fff;font-size:14px;line-height:1.42857143;color:#333}.img-responsive{display:block;max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.col-l
@pocketjoso
pocketjoso / gist:f154f3474e173f76751d
Created February 21, 2015 19:39
Critical CSS for marionettejs.com, as generated by Penthouse
@font-face {
font-family: 'Questrial';
font-style: normal;
font-weight: 400;
src: local('Questrial'), local('Questrial-Regular'), url(http://fonts.gstatic.com/s/questrial/v6/MYWJ4lYm5dbZ1UBuYox79JBw1xU1rKptJj_0jans920.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html,body,div,span,h1,h2,p,a,img,ul,li,header,nav,section{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}header,nav,section{display:block}body{line-height:1}ul{list-style:none}html{box-sizing:border-box;color:#818285;line-height:32px;-webkit-font-smoothing:antialiased;font-size:20px;font-family:'Questrial',sans-serif}*,*:before,*:after{box-sizing:inherit}section{padding:50px 0}@media screen and (max-width: 900px){section{padding:20px;}}.column-contain{padding-left:25px;padding-right:25px;border-top:1px solid #e3ecf1;margin:0 auto;width:90%;max-width:1200px}.col-1-3{width:33.33%}@media scr
@pocketjoso
pocketjoso / gist:dc4d240c929aa6631b00
Created February 2, 2015 22:27
Critical css for mazion, by Penthouse
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700,800');
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}header,section{display:block}a{background-color:transparent}img{border:0}button{margin:0;font:inherit;color:inherit}button{overflow:visible}button{text-transform:none}button{-webkit-appearance:button;cursor:pointer}button::-moz-focus-inner{padding:0;border:0}@media print{*,:before,:after{color:#000 !important;text-shadow:none !important;background:transparent !important;-webkit-box-shadow:none !important;box-shadow:none !important}a{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="#"]:after{content:""}img{page-break-inside:avoid}img{max-width:100% !important}p,h3{orphans:3;widows:3}h3{page-break-after:avoid}.navbar{display:none}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}h