Created
September 22, 2018 20:04
-
-
Save alexbaumgertner/ea62e20c2bb275b7db4512bfb9274d9c to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| { | |
| "data": { | |
| "site": { | |
| "siteMetadata": { | |
| "title": "Dustin Schau - Blog", | |
| "author": "Dustin Schau" | |
| } | |
| }, | |
| "markdownRemark": { | |
| "id": "e5350e68-b55f-5bc3-bd2e-a2ea609762fe", | |
| "html": "<p>\n <span\n class=\"gatsby-resp-image-wrapper\"\n style=\"position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;\"\n >\n <span\n class=\"gatsby-resp-image-background-image\"\n style=\"padding-bottom: 52.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAADBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAQv5SQtnH//EABkQAQEAAwEAAAAAAAAAAAAAAAEDAAIhMv/aAAgBAQABBQIsm1LjovT1V7n/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAaEAABBQEAAAAAAAAAAAAAAAAAAQIQEUFR/9oACAEBAAY/AkWzb5DR0f/EABoQAQEBAAMBAAAAAAAAAAAAAAERABAxQYH/2gAIAQEAAT8hECZmEUvgmtSuJ0e5GivH/9oADAMBAAIAAwAAABBwD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExQWFx/9oACAEBAAE/EGUQNhUPzMFXgOddxAqJfYi4bmoWCC0LdTr9n//Z'); background-size: cover; display: block;\"\n >\n <img\n class=\"gatsby-resp-image-image\"\n style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px transparent;\"\n alt=\"My next chapter\"\n title=\"\"\n src=\"/static/my-next-chapter-0a3df9b8a563105d76239297a729cefd-cb685.jpg\"\n srcset=\"/static/my-next-chapter-0a3df9b8a563105d76239297a729cefd-94a32.jpg 163w,\n/static/my-next-chapter-0a3df9b8a563105d76239297a729cefd-09a61.jpg 325w,\n/static/my-next-chapter-0a3df9b8a563105d76239297a729cefd-cb685.jpg 650w,\n/static/my-next-chapter-0a3df9b8a563105d76239297a729cefd-eab17.jpg 975w,\n/static/my-next-chapter-0a3df9b8a563105d76239297a729cefd-1ba42.jpg 1200w\"\n sizes=\"(max-width: 650px) 100vw, 650px\"\n />\n </span>\n </span>\n </p>\n<p><em>(Pretend that’s me and not Kevin Durant)</em></p>\n<p>I’m incredibly excited to announce that I’ve accepted a role with Gatsby Inc. working on an awesome static-site generator for React—although anyone who follows me on Twitter knows I think it’s so much more 😅.</p>\n<p>For those who may not be aware of what Gatsby is, go check out <a href=\"https://gatsbyjs.org\">the documentation</a> and read up on the <a href=\"https://gatsbyjs.com\">company itself</a> if it tickles your fancy—oh, and this blog you’re reading right now? Created with and powered by Gatsby! Gatsby powers an increasing number of incredibly successful and performant websites, including <a href=\"https://reactjs.org\">the ReactJS.org docs</a>, <a href=\"https://mozilladevelopers.github.io/playground/\">CSS Grid by Mozilla</a>, and <a href=\"https://next.gatsbyjs.org/showcase/\">far, far more</a>.</p>\n<p>The role with Gatsby will be far different than anything I’ve done as of yet in my career, but I look very much forward to this next journey working on something that I believe to be transformative, powerful, and capable of shaping the modern web experience.</p>\n<h2 id=\"thank-you\"><a href=\"#thank-you\" aria-hidden=\"true\" class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Thank you</h2>\n<p>I want to thank each and every one of my co-workers (and friends!) not only at Object Partners, but also Union Pacific. Both were transformative places in my career, and I can’t recommend them both highly enough. Talented folks working on fun projects, what more could you want!?</p>", | |
| "excerpt": "(Pretend that’s me and not Kevin Durant) I’m incredibly excited to announce that I’ve accepted a role with Gatsby Inc. working on an awesome static-site…", | |
| "timeToRead": 1, | |
| "slug": "/my-next-chapter", | |
| "frontmatter": { | |
| "date": "September 04, 2018", | |
| "rawDate": "2018-09-04T20:50:21.302Z", | |
| "draft": null, | |
| "excerpt": "I am happy to announce that I've accepted a role as Software Engineer for Gatsby Inc, a startup working on making a more performant web through smart defaults and optimizations.", | |
| "tags": [ | |
| "career", | |
| "gatsby", | |
| "gatsby inc", | |
| "object partners" | |
| ], | |
| "title": "My Next Chapter", | |
| "featured": { | |
| "image": { | |
| "resize": { | |
| "src": "/static/my-next-chapter-0a3df9b8a563105d76239297a729cefd-57c0c.jpg" | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| "pageContext": { | |
| "prev": { | |
| "excerpt": "I am incredibly excited to announce that for the last several months I’ve been working on a Manning liveVideo course. The topic, as you may have imagined, is CSS in JS, specifically with a styled-components and React focus. Hot damn, it’s…", | |
| "html": "<p>I am <em>incredibly</em> excited to announce that for the last several months I’ve been working on a <a href=\"https://www.manning.com/\">Manning</a> liveVideo course. The topic, as you may have imagined, is CSS in JS, specifically with a styled-components and React focus.</p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\"><p lang=\"en\" dir=\"ltr\">New <a href=\"https://twitter.com/ManningBooks?ref_src=twsrc%5Etfw\">@ManningBooks</a> early access video: "CSS in JavaScript: With styled-components and React" by Dustin Schau <a href=\"https://twitter.com/SchauDustin?ref_src=twsrc%5Etfw\">@schaudustin</a> <a href=\"https://twitter.com/hashtag/ReactJS?src=hash&ref_src=twsrc%5Etfw\">#ReactJS</a> <a href=\"https://twitter.com/hashtag/css?src=hash&ref_src=twsrc%5Etfw\">#css</a> <a href=\"https://twitter.com/hashtag/WebDev?src=hash&ref_src=twsrc%5Etfw\">#WebDev</a> <a href=\"https://twitter.com/hashtag/JavaScript?src=hash&ref_src=twsrc%5Etfw\">#JavaScript</a> <a href=\"https://t.co/TKZVC882kC\">https://t.co/TKZVC882kC</a> <a href=\"https://t.co/S2cUqiEFm7\">pic.twitter.com/S2cUqiEFm7</a></p>— John Dhabolt (@Dhabolt) <a href=\"https://twitter.com/Dhabolt/status/1027139514186256384?ref_src=twsrc%5Etfw\">August 8, 2018</a></blockquote>\n<p><em>Hot damn, it’s happening!</em></p>\n<h2 id=\"approach\"><a href=\"#approach\" aria-hidden=\"true\" class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Approach</h2>\n<p>However, a React focus can be somewhat limiting, so the last several lessons in the course focus on instrumenting CSS in JS <em>outside</em> of React, e.g. with tools and techniques like CSS Modules, scoped selectors, and even a brief segue into web component land with the Shadow DOM.</p>\n<p>The intent is for the course to be super approachable to beginners. However, making something approachable to beginners doesn’t necessarily mean that a variety of skillsets can’t get value out of the course, and I’d like to think there’s something here for not only beginners, but skillsets of a wide variety.</p>\n<h2 id=\"deal-of-the-day\"><a href=\"#deal-of-the-day\" aria-hidden=\"true\" class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Deal of the Day</h2>\n<p>If that’s not enough, the course has been selected as the “Deal of the Day” on <strong>August 15th</strong>! If this course sounds like it could be up your alley—and I truly believe it will be!—consider using the following code for 50% off if purchased on <strong>August 15th</strong> or <strong>August 16th</strong>.</p>\n<h1 style=\"text-align: center; display: block;\"><code>dotd081518au</code></h1>\n<p>Visit the <a href=\"http://bit.ly/2nxt6sK\">Deal of the Day Page</a> to learn more!</p>", | |
| "id": "06751f1c-45e5-5d19-a208-dca0207a515b", | |
| "timeToRead": 2, | |
| "slug": "/css-in-js-with-styled-components-and-react-manning", | |
| "frontmatter": { | |
| "date": "August 15, 2018", | |
| "draft": null, | |
| "tags": [ | |
| "css in js", | |
| "styled-components", | |
| "react" | |
| ], | |
| "title": "CSS in JS with styled-components and React (Manning)" | |
| } | |
| }, | |
| "next": null, | |
| "slug": "/my-next-chapter" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment