Skip to content

Instantly share code, notes, and snippets.

Jonas Ohlsson Aden pocketjoso

Block or report user

Report or block pocketjoso

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@pocketjoso
pocketjoso / gist:dc4d240c929aa6631b00
Created Feb 2, 2015
Critical css for mazion, by Penthouse
View gist:dc4d240c929aa6631b00
@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
@pocketjoso
pocketjoso / gist:f154f3474e173f76751d
Created Feb 21, 2015
Critical CSS for marionettejs.com, as generated by Penthouse
View gist:f154f3474e173f76751d
@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 / gruntfile.js
Last active Sep 17, 2017
Critical css for PHP sites using grunt-penthouse (could use Penthouse's node module to exact same effect)
View gruntfile.js
// 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',
View ido-green-critical.css
.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 / clean-css-bug
Created Nov 15, 2015
clean-css 3.4.3 merging bug
View clean-css-bug
import CleanCSS from 'clean-css'
const before = `
.hidden,
.visible-xs {
display: none!important;
}
@media (max-width:767px) {
.visible-xs {
@pocketjoso
pocketjoso / getElementOffset.js
Last active Aug 9, 2017
getElementOffset in JavaScript
View getElementOffset.js
// 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 / scroll-into-view-scroll-handler.js
Last active Aug 9, 2017
Comparing scroll position to element in scroll handler
View scroll-into-view-scroll-handler.js
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 / AuthenticationProtector.js
Last active Aug 30, 2017
AuthenticationProtector HOC breaks HMR due to always re-mounted - why?
View AuthenticationProtector.js
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
You can’t perform that action at this time.