Jonas Ohlsson Aden pocketjoso
pocketjoso
/ AuthenticationProtector.js
Last active
August 30, 2017 16:48
AuthenticationProtector HOC breaks HMR due to always re-mounted - why?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
/ scroll-into-view-scroll-handler.js
Last active
August 9, 2017 13:24
Comparing scroll position to element in scroll handler
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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! | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import CleanCSS from 'clean-css' | |
| const before = ` | |
| .hidden, | |
| .visible-xs { | |
| display: none!important; | |
| } | |
| @media (max-width:767px) { | |
| .visible-xs { |
pocketjoso
/ ido-green-critical.css
Created
November 7, 2015 13:29
Critical css for http://ido-green.appspot.com/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ 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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ gist:f154f3474e173f76751d
Created
February 21, 2015 19:39
Critical CSS for marionettejs.com, as generated by Penthouse
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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
/ gist:dc4d240c929aa6631b00
Created
February 2, 2015 22:27
Critical css for mazion, by Penthouse
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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 |