Skip to content

Instantly share code, notes, and snippets.

View davestaab's full-sized avatar
💭
code'n

Dave Staab davestaab

💭
code'n
View GitHub Profile

O Brave New World: Bringing Pubs in to Vuetopia

Well, we're finally to that point. It's finally time to start inching the pubs module toward the new frontier. But, in light of that exciting new opportunity, we have some immediate decisions to make. To integrate with Vue, we need webpack, and webpack also implies the pubs codebase being exposed to ECMA2015(ES6) features for the first time. So we need to decide if integrating new ES6 capabilities holds any value in simplifying and cleaning up the pubs codebase. Additionally, the general code-bundling system and philosophy we were operating under previously has done a lot to shape the way we were dealing with certain angular features, and we should take this opportunity to reevaluate many of those choices, so that they don't bog us down in the future.

That in mind, I've mostly organized our decisions into three distinct migration paths, which generally follow a linear progression from 'quick-n-dirty' to 'slow-but-thorough'. I've generally graded each migra

@davestaab
davestaab / est.css
Created May 9, 2018 20:50
res est css
.est-main{height:100%;color:#062735}.est-main,.est-main__body{display:-ms-flexbox;display:flex;width:100%}.est-main__body{-ms-flex:1;flex:1}.est-main__body.ng-enter{transition:opacity .3s linear .15s,transform .3s ease .15s}.est-main__body.ng-leave{transition:opacity .3s linear,transform .3s ease}.est-main__body.ng-enter,.est-main__body.ng-enter-prepare,.est-main__body.ng-leave.ng-leave-active{opacity:0;transform:translateY(-100px)}.est-main__body.ng-enter.ng-enter-active,.est-main__body.ng-leave{opacity:1;transform:translateY(0)}.est-main__body.ng-enter,.est-main__body.ng-enter-prepare,.est-main__body.ng-leave{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.est-main a,.est-main a:hover{color:#062735}.est-cards-working-rev{position:relative}.est-cards-working-rev .modal-content{border:1px solid #b3b3b3;background-color:hsla(0,0%,100%,.9)}.est-cards-working-rev__modal-body{padding:25px;background-color:#324d5f;color:#fff}.est-cards-working-rev__close-button{position:absolute;right:10px;top:10p
@media screen and (max-width:919px){.tablet-only{display:none}.tablet-desktop-only{display:none}.not-phone{display:none}}@media screen and (max-width:1174px){.desktop-only{display:none}}@media screen and (min-width:920px) and (max-width:1174px){.not-tablet{display:none}}@media screen and (min-width:920px){.phone-only{display:none}}@media screen and (min-width:1175px){.tablet-only{display:none}.phone-tablet-only{display:none}.not-desktop{display:none}}.pub-actionlist-panel .res-button,.pub-main .res-button{height:28px;color:#3f393c;overflow:hidden;transition:all cubic-bezier(.215,.61,.355,1) 250ms;background-color:rgba(255,255,255,0);background:linear-gradient(to right,rgba(244,205,84,.53),#f4cd54,rgba(243,204,83,.61))}.pub-actionlist-panel .res-button:hover,.pub-main .res-button:hover{background:linear-gradient(to right,rgba(242,198,60,.53),#f2c63c,rgba(241,197,59,.61))}.pub-actionlist-panel .res-button--muted,.pub-main .res-button--muted{background:0 0;color:#ae6c00;background-color:rgba(174,108,0,.15)}.pub-
@davestaab
davestaab / D3 Chart test, re-size horizontally.markdown
Last active October 2, 2015 14:35
D3 Chart test, re-size horizontally
@davestaab
davestaab / index.html
Last active August 29, 2015 14:21
d3 chart example
<!DOCTYPE html>
<html>
<head>
<!--<script type="application/javascript" src="file:///Users/davestaab/Projects/timekeeper/bower_components/d3/d3.min.js"></script>-->
<!--<script type="text/javascript" src="d3.v2.min.js"></script>-->
<style>
.circle {
fill: rgba(33, 33, 33, .2);
}
@davestaab
davestaab / index.html
Last active August 29, 2015 14:20
D3 coc layout editor test
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 960px;
height: 500px;
position: relative;
/*background-color: salmon;*/
@davestaab
davestaab / Flexbox-with-non-block-children.markdown
Last active August 29, 2015 14:13
Flexbox with non block children

Flexbox with non block children

I've run into an inconsistency in IE 10 support and flexbox. Is it just a fact that I need to make sure children of flexbox are display block?

This pen works as expected in webkit browsers and IE11. In IE10 however the flex:1; style on the .flex-child-label class seems to be ignored. If i make the .flex-child-label class be display:block it works as expected.

A Pen by Dave Staab on CodePen.

License.

@davestaab
davestaab / center div
Last active August 29, 2015 14:02
Center div vertically
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>