├── .env.development ├── .env.production ├── .gitignore ├── .nvmrc ├── .vscode └── illustrateddev_snippets.code-snippets ├── LICENSE ├── README.md ├── _redirects ├── content ├── drafts │ ├── Thinking-in-Scrollytelling.mdx │ ├── behind_the_notes │ │ └── index.mdx │ ├── dataunions │ │ ├── dataunion.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── drawinginvisiblethings3 │ │ └── index.mdx │ ├── drawinvisiblethings2 │ │ └── index.mdx │ ├── gatsbythemes │ │ ├── GatsbyThemes--thumbnail.png │ │ ├── GatsbyThemes_1.png │ │ ├── GatsbyThemes_2.png │ │ ├── GatsbyThemes_3.png │ │ ├── GatsbyThemes_4.png │ │ ├── build-content-rich-progressive-web-apps-with-gatsby-and-contentful.jpg │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── gift-economies │ │ ├── gift-economy.jpeg │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── gitmistakes │ │ ├── FixGitMistakes_1.png │ │ ├── FixGitMistakes_2.png │ │ ├── FixGitMistakes_3.png │ │ ├── FixGitMistakes_4.png │ │ ├── GitMistakes--thumbnail.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── proxies │ │ └── index.mdx │ ├── proxies_behindthescenes │ │ ├── Proxy_notes.png │ │ ├── Proxy_postits.jpg │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── reactsuspense │ │ ├── WftReactSuspense--thumbnail.png │ │ ├── WftReactSuspense_1.png │ │ ├── WftReactSuspense_2.png │ │ ├── WftReactSuspense_3.png │ │ ├── WftReactSuspense_4.png │ │ ├── build-an-app-with-react-suspense@2x.png │ │ ├── index.mdx │ │ ├── thumb@2x.png │ │ └── use-suspense-to-simplify-your-async-ui@2x.png │ ├── secondbrain2 │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── secretsandwich │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── ternary │ │ ├── ConditionCode.js │ │ ├── Layout.png │ │ ├── MilkText.png │ │ ├── Signpost.png │ │ ├── ThreeColumn.js │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── vuerouter │ │ ├── VueRouter--thumbnail.png │ │ ├── VueRouter_1.png │ │ ├── VueRouter_2.png │ │ ├── VueRouter_3.png │ │ ├── VueRouter_4.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ └── xstate │ │ ├── WhatisxState--small.png │ │ ├── index.mdx │ │ ├── thumb@2x.png │ │ ├── xState_1.png │ │ ├── xState_2.png │ │ ├── xState_3.png │ │ └── xState_4.png ├── explainers │ ├── 0_databases │ │ ├── DB_1.png │ │ ├── DB_2.png │ │ ├── DB_3.png │ │ ├── DB_4.png │ │ ├── DB_5.png │ │ ├── DB_6-isolated.svg │ │ ├── DB_6.png │ │ ├── DB_Interactive.js │ │ ├── index.mdx │ │ ├── interactive_illo │ │ │ └── mainImage.js │ │ └── thumb@2x.png │ ├── api │ │ ├── API_0.png │ │ ├── API_1.png │ │ ├── API_2.png │ │ ├── API_3.png │ │ ├── API_4.png │ │ ├── API_5.png │ │ ├── API_6.png │ │ ├── API_7.png │ │ ├── API_Interactive.js │ │ ├── index.mdx │ │ ├── interactiveIllo │ │ │ ├── linkImage.js │ │ │ └── mainImage.js │ │ └── thumb@2x.png │ ├── babel │ │ ├── Babel_Final_Sm@2x.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── compilers │ │ ├── Compile_Transpile_Final.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── drawinvisiblethings1 │ │ ├── Feature.js │ │ ├── Illustration_Cake800@2x.png │ │ ├── MultipartIntro.js │ │ ├── Techtools.png │ │ ├── abstractiontower.png │ │ ├── frame.png │ │ ├── hide-highlight.png │ │ ├── index.mdx │ │ ├── mapping.png │ │ ├── thumb@2x.png │ │ └── timeismoney.png │ ├── fruit-comparison │ │ ├── FruitComparison_P1.png │ │ ├── FruitComparison_P2.png │ │ ├── FruitComparison_P3.png │ │ ├── FruitComparison_P4.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── jsx │ │ ├── JSX_Final@2x.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── maintainers-podcast │ │ ├── babel_crop.png │ │ ├── index.mdx │ │ ├── spot_gift.png │ │ └── thumb@2x.png │ ├── react-vdom │ │ ├── ReactVDom_1@2x.png │ │ ├── ReactVDom_2@2x.png │ │ ├── ReactVDom_3@2x.png │ │ ├── ReactVDom_4@2x.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ └── spread │ │ ├── Spread.png │ │ ├── index.mdx │ │ └── thumb@2x.png ├── illustratednotes │ ├── advancedjs │ │ ├── AdvancedJS--small.png │ │ ├── AdvancedJS_1@2x.png │ │ ├── AdvancedJS_2@2x.png │ │ ├── AdvancedJS_3@2x.png │ │ ├── AdvancedJS_4@2x.png │ │ ├── AdvancedJS_5.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── customhooks │ │ ├── customhooks-1.png │ │ ├── customhooks-2.png │ │ ├── customhooks-3.png │ │ ├── customhooks-4.png │ │ ├── customhooks-5.png │ │ ├── customhooks-mini.png │ │ ├── index.mdx │ │ ├── shareable-custom-hooks-in-react.png │ │ └── thumb@2x.png │ ├── cypress │ │ ├── CyTesting01@2x.png │ │ ├── CyTesting02@2x.png │ │ ├── CyTesting03@2x.png │ │ ├── Cypress_Sketchnotes.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── es2019 │ │ ├── es2019-sketchnotes-1-Optional.png │ │ ├── es2019-sketchnotes-2-Stable.png │ │ ├── es2019-sketchnotes-3-Flatten.png │ │ ├── es2019-sketchnotes-4-FlatMap.png │ │ ├── es2019-sketchnotes-5-Trim.png │ │ ├── es2019-sketchnotes-6-Symbol.png │ │ ├── es2019-sketchnotes-7-ObjectEntries.png │ │ ├── es2019-sketchnotes-Intro.png │ │ ├── es2019-sketchnotes-Title.png │ │ ├── es2019_sketchnotes--mini.png │ │ ├── index.mdx │ │ ├── javascript-es2019-in-practice.jpg │ │ ├── javascript-es2019-in-practice.png │ │ └── thumb@2x.png │ ├── gatsby-contentful │ │ ├── build-content-rich-progressive-web-apps-with-gatsby-and-contentful.png │ │ ├── gatsbycontentful1.png │ │ ├── gatsbycontentful2.png │ │ ├── gatsbycontentful3.png │ │ ├── gatsbycontentful4.png │ │ ├── gatsbycontentful_sketchnotes--mini.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── graphql │ │ ├── graphql-query-language.png │ │ ├── graphql1.png │ │ ├── graphql2.png │ │ ├── graphql3.png │ │ ├── graphql4.png │ │ ├── graphql_sketchnotes--mini.png │ │ ├── index.mdx │ │ ├── og-graphql-query-language.jpg │ │ └── thumb@2x.png │ ├── immer │ │ ├── immer-1.png │ │ ├── immer-2.png │ │ ├── immer-3.png │ │ ├── immer-4.png │ │ ├── immer-mini.png │ │ ├── immutable-javascript-data-structures-with-immer.jpg │ │ ├── index.mdx │ │ ├── robo-socks.png │ │ └── thumb@2x.png │ ├── react360 │ │ ├── index.mdx │ │ ├── react360_full@2x.png │ │ ├── react360_p1@2x.png │ │ ├── react360_p2@2x.png │ │ ├── react360_p3@2x.png │ │ ├── react360_p4@2x.png │ │ ├── thumb@2x.png │ │ └── vr-applications-using-react-360.jpg │ ├── reactgirls │ │ ├── ReactJSG1.png │ │ ├── ReactJSG2.png │ │ ├── ReactJSG3.png │ │ ├── ReactJSG4.png │ │ ├── ReactJSG5.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── secondbrain1 │ │ ├── Basb1-1.png │ │ ├── Basb1-2.png │ │ ├── Basb1-3.png │ │ ├── Basb1-4.png │ │ ├── Basb2-1.png │ │ ├── Basb2-2.png │ │ ├── Basb2-3.png │ │ ├── Basb3-1.png │ │ ├── Basb3-2.png │ │ ├── Basb3-3.png │ │ ├── Basb4-1.png │ │ ├── Basb4-2.png │ │ ├── Basb4-3.png │ │ ├── Basb4-4.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── secondbrain2 │ │ ├── Basb5-1.png │ │ ├── Basb5-2.png │ │ ├── Basb5-3.png │ │ ├── Basb5-4.png │ │ ├── Basb6-1.png │ │ ├── index.mdx │ │ └── thumb@2x.png │ ├── vuesocket │ │ ├── index.mdx │ │ ├── thumb@2x.png │ │ ├── vue-and-socket-io-for-real-time-communication.jpg │ │ ├── vuesocket1.png │ │ ├── vuesocket2.png │ │ ├── vuesocket3.png │ │ └── vuesocket_sketchnotes--mini.png │ ├── websecurity │ │ ├── index.mdx │ │ ├── thumb@2x.png │ │ ├── web-security-1.png │ │ ├── web-security-2.png │ │ ├── web-security-3.png │ │ ├── web-security-4.png │ │ ├── web-security-5.png │ │ ├── web-security-6.png │ │ ├── web-security-7.png │ │ └── web-security-final--small.png │ └── wtf-rust │ │ ├── WTFRust_1.png │ │ ├── WTFRust_2.png │ │ ├── WTFRust_3.png │ │ ├── WTFRust_4.png │ │ ├── WTFRust_5.png │ │ ├── WTFRust_6.png │ │ ├── WTFisRust--small.png │ │ ├── index.mdx │ │ ├── stackoverflow.png │ │ └── thumb@2x.png └── static_content │ ├── about.mdx │ ├── faq.mdx │ ├── faqImages.js │ └── resourceData.js ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── package.json ├── src ├── components │ ├── DownloadSection.js │ ├── MainCardGrid.js │ ├── animationRenderer.js │ ├── bio.js │ ├── bullet.svg │ ├── card.js │ ├── container.js │ ├── downArrow.svg │ ├── duotoneDark.js │ ├── footer.js │ ├── hamburger.js │ ├── header.js │ ├── image.js │ ├── inlineSubscribe.js │ ├── link-tooltip-theme.css │ ├── link.js │ ├── mdx │ │ ├── Blockquote.js │ │ ├── BlogImage.js │ │ ├── Center.js │ │ ├── Code.js │ │ ├── Divider.js │ │ ├── FullNote.js │ │ ├── ImageFrame.js │ │ ├── ImageGrid.js │ │ ├── NotesContainer.js │ │ ├── Paragraph.js │ │ ├── ReadNext.js │ │ ├── RefItem.js │ │ ├── RefsandReading.js │ │ ├── SmallCenter.js │ │ ├── Subheaders.js │ │ ├── TableofContents.js │ │ ├── ThreeImageGrid.js │ │ ├── Title.js │ │ ├── Tooltip.js │ │ ├── TwoCol.js │ │ ├── VerticalSketchnote.js │ │ ├── egghead-course-card.js │ │ ├── index.js │ │ └── tippy-light.css │ ├── recCoursesCard.js │ ├── resourceBook.js │ ├── resourceCard.js │ ├── seo.js │ ├── share.js │ ├── subbutton.js │ ├── subscribe.js │ └── transition.js ├── images │ ├── downloadicon.svg │ ├── egghead-logo.svg │ ├── egghead-powered.svg │ ├── emailicon.svg │ ├── favicon.ico │ ├── id_favicon.svg │ ├── id_logo.svg │ ├── maggie.png │ ├── pinterest.svg │ └── twitter.svg ├── layouts │ ├── layout-styles.css │ └── layout.js ├── pages │ ├── 404.js │ ├── about.js │ ├── faq.js │ ├── index.js │ ├── resources.js │ └── sitemap.js ├── templates │ ├── allPosts.js │ └── page.js └── utils │ ├── breakpoints.js │ └── reset.js ├── static └── images │ ├── id_favicon.svg │ ├── id_opengraph.png │ ├── illustratednotes-diagram.png │ └── resources │ ├── aaronblaise.png │ ├── cda.png │ ├── cgma.png │ ├── ctrlpaint.png │ ├── drawabox.png │ ├── foundation.png │ ├── moddayjames.png │ ├── nma.png │ ├── peterhan.png │ ├── schoolism.png │ ├── svs.png │ ├── tycarter.png │ └── willweston.png └── yarn.lock /.env.development: -------------------------------------------------------------------------------- 1 | CONVERTKIT_PUBLIC_KEY=1234 2 | CONVERTKIT_SIGNUP_FORM=871850 -------------------------------------------------------------------------------- /.env.production: -------------------------------------------------------------------------------- 1 | CONVERTKIT_PUBLIC_KEY=1234 2 | CONVERTKIT_SIGNUP_FORM=871850 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | public 4 | .DS_store 5 | yarn-error.log -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v14 2 | -------------------------------------------------------------------------------- /.vscode/illustrateddev_snippets.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "MDX Header": { 3 | "prefix": "mdxh", 4 | "scope": "mdx, markdown, md", 5 | "body": [ 6 | "---", 7 | "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE", 8 | "title: '${Title}'", 9 | "description: '${Description}'", 10 | "thumbnail: ./thumb@2x.png", 11 | "slug: ${Slug}", 12 | "category: '${Category}'", 13 | "published: false", 14 | "---", 15 | ] 16 | } 17 | } 18 | 19 | // Place your illustrateddev workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 20 | // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 21 | // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 22 | // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 23 | // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 24 | // Placeholders with the same ids are connected. 25 | // Example: 26 | // "Print to console": { 27 | // "scope": "javascript,typescript", 28 | // "prefix": "log", 29 | // "body": [ 30 | // "console.log('$1');", 31 | // "$2" 32 | // ], 33 | // "description": "Log output to console" 34 | // } 35 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Illustrated.dev 2 | 3 | ### Illustrated.dev explains web development through illustration. 4 | 5 | [⟶ Visit](https://illustrated.dev/) 6 | 7 | ![Homepage of illustrated.dev](https://p-ZmFjNlQ.b3.n0.cdn.getcloudapp.com/items/X6uD9nEX/Illustrated.dev.png?v=b363070d4a1b254bc47de24d86b233b7) 8 | 9 | 10 | -------------------------------------------------------------------------------- /_redirects: -------------------------------------------------------------------------------- 1 | / https://maggieappleton.com/ 301 2 | index.html https://maggieappleton.com/ 301 3 | https://illustrated.dev/ https://maggieappleton.com/ 301 4 | ## Created with gatsby-plugin-netlify 5 | /databases https://maggieappleton.com/databases 301 6 | /drawinginvisibles1 https://maggieappleton.com/drawinginvisibles1 301 7 | /customhooks https://maggieappleton.com/customhooks 301 8 | /maintainers https://maggieappleton.com/maintainers 301 9 | /advancedjs https://maggieappleton.com/advancedjs 301 10 | /websecurity https://maggieappleton.com/websecurity 301 11 | /immer https://maggieappleton.com/immer 301 12 | /contentful-gatsby https://maggieappleton.com/contentful-gatsby 301 13 | /es2019 https://maggieappleton.com/es2019 301 14 | /graphql https://maggieappleton.com/graphql 301 15 | /cypress https://maggieappleton.com/cypress 301 16 | /react360 https://maggieappleton.com/react360 301 17 | /vuesocket https://maggieappleton.com/vuesocket 301 18 | /jsx https://maggieappleton.com/jsx 301 19 | /react-vdom https://maggieappleton.com/react-vdom 301 20 | /spread https://maggieappleton.com/spread 301 21 | /fruit-comparison https://maggieappleton.com/fruit-comparison 301 22 | /compilers https://maggieappleton.com/compilers 301 23 | /babel https://maggieappleton.com/babel 301 24 | /resources https://maggieappleton.com/resources 301 25 | /faq https://maggieappleton.com/faq 301 26 | /about https://maggieappleton.com/about 301 27 | /secondbrain2 https://maggieappleton.com/basb 301! 28 | /wtfrust http://maggieappleton.com/wtf-rust 301! 29 | /secondbrain1 https://maggieappleton.com/basb 301! 30 | /reactgirls http://maggieappleton.com/ 301! 31 | /api http://maggieappleton.com/api 301! -------------------------------------------------------------------------------- /content/drafts/Thinking-in-Scrollytelling.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | date: 2019-05-08 4 | title: 'Thinking in Scrollytelling' 5 | thumbnail: ./thumb@2x.png 6 | slug: scrollytelling 7 | tags: ['Scrollytelling', 'Meta'] 8 | description: "Description in here" 9 | featured: true 10 | 11 | --- 12 | 13 | # Thinking in Scrollytelling 14 | 15 | The internet is severely lacking guides on the craft of scrollytelling. 16 | 17 | Right now, I do not know how to create a scrollytelling article. 18 | I think I have about 60% of the puzzle pieces in hand. 19 | But I've yet to snap them all together, and track down the missing parts. 20 | 21 | This is the story of me trying to complete that puzzle. 22 | 23 | Here's where I'm at. 24 | 25 | 1. Everything [The Pudding](#) and [The NYT Interative](#) make gives me very deep feels. 26 | 2. I've done test-runs with most of the framework options – [Scrollama](#), [Interaction Observer](#), [Waypoints](#), [Scrollmagic](#) 27 | 3. 28 | 29 | ## A Shift of Mind 30 | 31 | One the biggest hurdles I'm facing is how to plan out a scrollystory. 32 | 33 | We're working across more dimensions than I'm used to: 34 | * Visual Design 35 | * Pacing & Time 36 | * Javascript Interactions 37 | 38 | 39 | ### The Toolbox 40 | 41 | * Sticky Elements – Continuous Presence over Time 42 | * Evolving Sticky Elements – Continuous Presence + Evolution over Time 43 | * Evolving Scrolling Elements - Movement + Evolution 44 | * Hover Overs 45 | * Triggers 46 | * Opacity & Reveals 47 | * Sidenotes & References 48 | 49 | ### Pacing & Timing 50 | 51 | * The Primary Timeline - The pace of the scroll controlled by the user 52 | * Secondary Timelines - Elements moving at a different pace to the primary timeline 53 | * Independent Timelines – Elements not tied to the primary timeline at all (eg. self-contained animations) -------------------------------------------------------------------------------- /content/drafts/behind_the_notes/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | date: 2019-05-05 4 | title: Behind the Illustrated Notes 5 | thumbnail: ./thumb@2x.png 6 | slug: behindthenotes 7 | category: 'illustrated notes' 8 | published: true 9 | 10 | --- 11 | 12 | ## How I Illustrate Notes 13 | 14 | 15 | It feels disingenuous to call them "sketchnotes" 16 | 17 | The [Sketchnote Army](#)'s defines sketchnotes as "purposeful doodling while listening to something interesting" while mostly captures it. 18 | Though xxx offers us the more specific description ... 19 | 20 | --- 21 | 22 | Let's think of a spectrum from sketchnotes from full blown illustration. 23 | Mine sit about here (25% illo, 75% sketchnote). 24 | They're still quick, but they're not instant. 25 | They're more planned and strategic than guy-reaction, reflexive sketchnotes. 26 | 27 | --- 28 | 29 | 30 | # "How do you make these?" 31 | # "What's your process?" 32 | 33 | ## TDLR; It's complicated 34 | 35 | 36 | *Start with a story of some kind. How did you get here?* 37 | 38 | Analogies: 39 | * The wizard of Oz behind the curtain 40 | 41 | --- 42 | 43 | ## The Shallow Tools 44 | 45 | On a surface level, I draw my sketchnotes on an iPad pro with an apple pencil using the Procreate app. 46 | 47 | 1. iPad 48 | 2. Apple Pencil 49 | 3. Procreate 50 | 51 | 52 | 53 | --- 54 | 55 | ## The Deep Tools 56 | 57 | Everything I know about drawing I learned from these guys: 58 | 59 | Dynamic Sketching - Peter Han 60 | 61 | Will Weston 62 | * Strong, simple and clear. 63 | * 3 tones, big medium small 64 | 65 | Rapid Viz 66 | 67 | How to Draw - Scott Robertson 68 | 69 | --- 70 | 71 | ### Doing the Thing 72 | 73 | The act of sitting in an audience and taking illustrated notes is frankly stressful. In a good way. Your ' 74 | 75 | --- 76 | 77 | ### Ingredients 78 | 79 | There's a lot to sketchnoting. 80 | I've broken this down into sections for how I approach each part. 81 | The guidelines of sketchnoting are the same as good graphic design. 82 | 83 | ### Time 84 | 85 | ### Compostion & Layout 86 | 87 | Composition is the great invisible force that makes or breaks an illustration. 88 | 89 | * Visual Anchors 90 | * Grids and Columns 91 | 92 | ### Typography 93 | 94 | Studying fonts on [Typewolf](#), [MyFonts](#), [Adobe Fonts](#) 95 | * I often hunt through type styles on these sites and use them as reference for lettering styles. 96 | 97 | ### Visual Language & Style Influences 98 | 99 | Personally I'm heavily influenced by 3D artists, 100 | 101 | * Peter Tarka 102 | * Highly composed photography styles - Dina Belenko 103 | * Product Design sketching 104 | * 105 | 106 | ## Gestalt 107 | 108 | Continutation 109 | 110 | 111 | -------------------------------------------------------------------------------- /content/drafts/dataunions/dataunion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/dataunions/dataunion.png -------------------------------------------------------------------------------- /content/drafts/dataunions/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-01-02 3 | title: Are Data Unions the Future of Data? 4 | description: "How new kinds of data ownership are opening up the possibilities of internet economics" 5 | thumbnail: ./thumb@2x.png 6 | slug: data-unions 7 | category: 'illustrated notes' 8 | published: true 9 | --- 10 | 11 | At the end of last year I got to attend [MozFest 2019]() here in London. 12 | 13 | [Streamr]() 14 | 15 | Have half finished notes in a dropbox PSD file for web monetization. Make it its own post. Basics of what you know about Coil and the Web Monetization API 16 | 17 | ![](./dataunion.png) 18 | -------------------------------------------------------------------------------- /content/drafts/dataunions/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/dataunions/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/gatsbythemes/GatsbyThemes--thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gatsbythemes/GatsbyThemes--thumbnail.png -------------------------------------------------------------------------------- /content/drafts/gatsbythemes/GatsbyThemes_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gatsbythemes/GatsbyThemes_1.png -------------------------------------------------------------------------------- /content/drafts/gatsbythemes/GatsbyThemes_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gatsbythemes/GatsbyThemes_2.png -------------------------------------------------------------------------------- /content/drafts/gatsbythemes/GatsbyThemes_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gatsbythemes/GatsbyThemes_3.png -------------------------------------------------------------------------------- /content/drafts/gatsbythemes/GatsbyThemes_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gatsbythemes/GatsbyThemes_4.png -------------------------------------------------------------------------------- /content/drafts/gatsbythemes/build-content-rich-progressive-web-apps-with-gatsby-and-contentful.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gatsbythemes/build-content-rich-progressive-web-apps-with-gatsby-and-contentful.jpg -------------------------------------------------------------------------------- /content/drafts/gatsbythemes/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-01-02 3 | title: The Art and Craft of Gatsby Themes 4 | description: "Get into making Gatsby themes – they're little building blocks of functionality you can mix n' match n' share on NPM." 5 | thumbnail: ./thumb@2x.png 6 | slug: gatsby-themes 7 | category: 'illustrated notes' 8 | published: true 9 | --- 10 | 11 | import FullNote from '../../../src/components/mdx/FullNote.js' 12 | import NotesContainer from '../../../src/components/mdx/NotesContainer.js' 13 | 14 | 15 | 16 | 17 | More illustrated notes, this time on Gatsby themes! 18 | They're a shiny new feature in @gatsbyjs – little building blocks of site functionality you can mix n' match n' share on NPM. 19 | 20 | [Chris Biscardi](https://twitter.com/chrisbiscardi) 21 | 22 | ![](https://og-image-egghead-course.now.sh/composable-gatsby-themes) 23 | 24 | 25 | Fluff fluff fluff 26 | 27 |
28 | 29 | Fluff fluff fluff 30 | 31 | Fluff fluff fluff 32 | 33 | ![](./GatsbyThemes_1.png) 34 | 35 | ![](./GatsbyThemes_2.png) 36 | 37 | ![](./GatsbyThemes_3.png) 38 | 39 | ![](./GatsbyThemes_4.png) 40 | 41 | --- 42 | 43 | 44 | 45 | ![](./GatsbyThemes--thumbnail.png) 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /content/drafts/gatsbythemes/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gatsbythemes/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/gift-economies/gift-economy.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gift-economies/gift-economy.jpeg -------------------------------------------------------------------------------- /content/drafts/gift-economies/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-03-28 3 | title: "Open Source Software as a Gift Economy" 4 | description: "A light cultural introduction what Open Source Software projects can learn from the anthropology of gift economies" 5 | thumbnail: ./thumb@2x.png 6 | slug: gift-economy 7 | category: 'explainers' 8 | published: true 9 | --- 10 | 11 | import Link from '../../../src/components/link.js' 12 | import ResourceBook from '../../../src/components/resourceBook.js' 13 | import RefsAndReading from '../../../src/components/mdx/RefsandReading.js' 14 | import RefItem from '../../../src/components/mdx/RefItem.js' 15 | import NotesContainer from '../../../src/components/mdx/NotesContainer.js' 16 | 17 | 18 | 19 | It's one of the largest projects on Open Collective, running an annual budget of 290,000 USD. And yet it's not a legal company. 20 | The team of 6 core maintainers are all classified as volunteers, as are the 854 other contributors who have contributed to the codebase on Github . 21 | 22 | With over 14 million weekly downloads, it's become such an essential utility in the modern JavaScript toolchain that it blends into the wallpaper. 23 | Of course you use Babel. Everyone uses Babel. 24 | 25 | Babel isn't unique 26 | 27 | In just the past year the ecosystem around Open Source has evolved into some fascinating directions. Github launched sponsors that allows contributions to individuals. 28 | There's been plenty of fuss made over Patreon 29 | 30 | 31 | 32 | ![](./gift-economy.jpeg) 33 | 34 | 35 | 36 | 37 | 38 | 39 | --- 40 | 41 | ### References & Further Reading 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /content/drafts/gift-economies/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gift-economies/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/gitmistakes/FixGitMistakes_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gitmistakes/FixGitMistakes_1.png -------------------------------------------------------------------------------- /content/drafts/gitmistakes/FixGitMistakes_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gitmistakes/FixGitMistakes_2.png -------------------------------------------------------------------------------- /content/drafts/gitmistakes/FixGitMistakes_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gitmistakes/FixGitMistakes_3.png -------------------------------------------------------------------------------- /content/drafts/gitmistakes/FixGitMistakes_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gitmistakes/FixGitMistakes_4.png -------------------------------------------------------------------------------- /content/drafts/gitmistakes/GitMistakes--thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gitmistakes/GitMistakes--thumbnail.png -------------------------------------------------------------------------------- /content/drafts/gitmistakes/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-01-08 3 | title: Fixing Up Your Git 4 | thumbnail: ./thumb@2x.png 5 | slug: gitmistakes 6 | description: "Ever lost your HEAD? Accidentally missed a --soft landing with --hard reset? 7 | It's tough to Git it sometimes." 8 | category: 'illustrated notes' 9 | published: true 10 | --- 11 | 12 | import FullNote from '../../../src/components/mdx/FullNote.js' 13 | import NotesContainer from '../../../src/components/mdx/NotesContainer.js' 14 | 15 | 16 | 17 | 18 | Ever lost your HEAD? Accidentally missed a --soft landing with --hard reset? 19 | It's tough to Git it sometimes. 20 | 21 | [Chris Achard](https://twitter.com/chrisachard) 22 | 23 | ![](https://og-image-egghead-course.now.sh/fix-common-git-mistakes) 24 | 25 | 26 | Fluff fluff fluff 27 | 28 |
29 | 30 | Fluff fluff fluff 31 | 32 | Fluff fluff fluff 33 | 34 | ![](./FixGitMistakes_4.png) 35 | 36 | ![](./FixGitMistakes_3.png) 37 | 38 | ![](./FixGitMistakes_1.png) 39 | 40 | ![](./FixGitMistakes_2.png) 41 | 42 | --- 43 | 44 | 45 | 46 | ![](./GitMistakes--thumbnail.png) 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /content/drafts/gitmistakes/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/gitmistakes/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/proxies/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Proxy Magicians and Metaprogramming in JavaScript 4 | thumbnail: ./thumb@2x.png 5 | slug: proxies 6 | tags: ['Proxies', 'JavaScript', 'Metaprogramming'] 7 | description: "" 8 | featured: false 9 | --- 10 | 11 | We pass the proxy magician two things: 12 | A target object - which is the thing they'll perform their magic trick on 13 | A handler – which is the instructions for which magic trick to perform 14 | 15 | (Image) 16 | 17 | We of course have to write the handler instructions before we call the proxy to perform its magic. 18 | 19 | Handlers are made up of a series of traps. 20 | Each trap is a particular step in the magic trick. 21 | We can have multiple traps in each handler. 22 | There are thirteen total types of traps we can setup: 23 | 24 | ``` 25 | getPrototypeOf() 26 | setPrototypeOf() 27 | isExtensible() 28 | preventExtensions() 29 | getOwnPropertyDescriptor() 30 | defineProperty() 31 | has() 32 | get() 33 | set() 34 | deleteProperty() 35 | ownKeys() 36 | apply() 37 | construct() 38 | 39 | ``` 40 | 41 | But there are two main ones that the vast majority of proxies use: 42 | Get and Set 43 | These are the classics - like the card trick and the ball shuffle. 44 | 45 | Every trap comes with an if/else conditional that decides if the magician should "trap" the object and do its magic. 46 | 47 | For example xxx 48 | 49 | 50 | -------------------------------------------------------------------------------- /content/drafts/proxies_behindthescenes/Proxy_notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/proxies_behindthescenes/Proxy_notes.png -------------------------------------------------------------------------------- /content/drafts/proxies_behindthescenes/Proxy_postits.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/proxies_behindthescenes/Proxy_postits.jpg -------------------------------------------------------------------------------- /content/drafts/proxies_behindthescenes/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-01-02 3 | title: 'How to Draw a JavaScript Proxy' 4 | description: 'Behind the scenes on the JavaScript Proxies explainer' 5 | thumbnail: ./thumb@2x.png 6 | slug: proxies 7 | category: meta 8 | published: true 9 | --- 10 | 11 | When my fellow eggheader [John Lindquist]() asked if I could help create some illustrations for his upcoming presentation on [JavaScript Proxies](), I was frankly a bit afraid. 12 | 13 | After five minutes of googling it became obvious even experienced JavaScript developers have a hard time wrapping their head around proxy objects. 14 | 15 | Programming is already an exercise in abstract thinking. 16 | But to layer it on, proxies belong to the world of _meta_ programming – one level of abstraction up! 17 | 18 | Nevertheless, where there's widespread confusion, there's also opportunity. Bringing visual explanations and metaphorical thinking into the equation would give us a whole new set of lenses to see with. 19 | 20 | ## Chalk and Talk 21 | 22 | We kicked off the project with a draw-and-chat session. 23 | John patiently walked me through the basics of proxies, while I sketched possible ways to diagram the main concepts. 24 | 25 | ![](./Proxy_notes.png) 26 | 27 | Most of what I'm doing in these notes is trying to establish spatial relationships that make sense. 28 | And asking trippy questions to get there: 29 | * Is the proxy object sitting above, below, or next to to it's target object? 30 | * Is it bigger or smaller? 31 | * Does it wrap around it like a blanket? 32 | * It is even a solid object? Or more like a liquid or gas? 33 | 34 | One on level these questions might seem absurd. They're not though. 35 | 36 | We're trying to build an imaginary physical world that helps turn proxies - some obscure, invisible programming functionality - into a visible reality that you, I, or any non-technical "normal" person standing next to us on the tube could conceivably understand. 37 | 38 | Which involves asking weird questions about the location, material, colour, size, and weight of code. 39 | 40 | ```jsx 41 | Code in here 42 | 43 | 44 | ``` 45 | ## Woodshedding 46 | 47 | At this point, I understood about 40% of how Proxies worked. 48 | 49 | I retreated back behind my drawing monitor with a large stack of post its, and continued desperately Googling. 50 | After reading every article on the front page, plus a few rounds of [John's fantastic presentation slides]() and tinkering around in [Codesandbox](), I managed to bump that up to 80% comprehension. 51 | Which was good enough to start scripting this thing out. 52 | 53 | I always do scripts and initial sketches on post-its. 54 | 55 | ![Writing the script and sketching ideas for javascript proxies on post-it notes](./Proxy_postits.jpg) 56 | 57 | They're the perfect work medium IMHO - especially for anything with a narrative flow like articles and tutorials. 58 | They let you shuffle bits around without any friction. 59 | You can write crap ideas on them. 60 | And draw crap drawings. 61 | And then satisfyingly scrumple them up to erase your crapness. 62 | The batteries never need charging. 63 | 64 | -------------------------------------------------------------------------------- /content/drafts/proxies_behindthescenes/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/proxies_behindthescenes/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/reactsuspense/WftReactSuspense--thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/reactsuspense/WftReactSuspense--thumbnail.png -------------------------------------------------------------------------------- /content/drafts/reactsuspense/WftReactSuspense_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/reactsuspense/WftReactSuspense_1.png -------------------------------------------------------------------------------- /content/drafts/reactsuspense/WftReactSuspense_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/reactsuspense/WftReactSuspense_2.png -------------------------------------------------------------------------------- /content/drafts/reactsuspense/WftReactSuspense_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/reactsuspense/WftReactSuspense_3.png -------------------------------------------------------------------------------- /content/drafts/reactsuspense/WftReactSuspense_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/reactsuspense/WftReactSuspense_4.png -------------------------------------------------------------------------------- /content/drafts/reactsuspense/build-an-app-with-react-suspense@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/reactsuspense/build-an-app-with-react-suspense@2x.png -------------------------------------------------------------------------------- /content/drafts/reactsuspense/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-01-14 3 | title: WTF is React Suspense? 4 | thumbnail: ./thumb@2x.png 5 | slug: reactsuspense 6 | category: 'illustrated notes' 7 | published: true 8 | --- 9 | 10 | 11 | 12 | With all the React Suspense buzz going around, some of you might be wondering WTF it is / why it matters 13 | I made a handy one-page guide to help explain 14 | 15 | [Kent C. Dodds](https://twitter.com/kentcdodds) 16 | 17 | [Michael Chan](https://twitter.com/chantastic) 18 | 19 | 20 | 21 | 22 |
23 | 24 | Fluff fluff fluff 25 | 26 | Fluff fluff fluff 27 | 28 | ![](./WftReactSuspense_1.png) 29 | 30 | ![](./WftReactSuspense_2.png) 31 | 32 | ![](./WftReactSuspense_3.png) 33 | 34 | ![](./WftReactSuspense_4.png) 35 | 36 | --- 37 | 38 |

The Whole Illustrated Note

39 |
40 | 41 |
47 | 48 | ![](./WftReactSuspense--thumbnail.png) 49 | 50 |
51 | 52 |

55 | Want to learn more? 56 |

57 | 58 |

62 | A high-res & printable version of the notes, plus the full course 63 | is avaliable here on the{' '} 64 | 65 | The Name 66 | {' '} 67 | page. 68 |

69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /content/drafts/reactsuspense/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/reactsuspense/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/reactsuspense/use-suspense-to-simplify-your-async-ui@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/reactsuspense/use-suspense-to-simplify-your-async-ui@2x.png -------------------------------------------------------------------------------- /content/drafts/secondbrain2/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-01-28 3 | title: Building a Second Brain – Part 2 4 | thumbnail: ./thumb@2x.png 5 | slug: secondbrain2 6 | category: 'illustrated notes' 7 | published: true 8 | description: "Another round of illustrated notes on the Building A Second Brain system by Tiago Forte" 9 | --- 10 | 11 | import FullNote from '../../../src/components/mdx/FullNote.js' 12 | import NotesContainer from '../../../src/components/mdx/NotesContainer.js' 13 | import Link from '../../../src/components/link' 14 | import InlineSignUp from '../../../src/components/inlineSubscribe.js' 15 | 16 | 17 | 18 | 19 | Flufff 20 | 21 | ### I've been taking a course called Building a Second Brain by Tiago Forte. 22 | 23 | --- 24 | 25 | There's plenty more to explore on Tiago's [Forte Labs Blog](https://praxis.fortelabs.co/) and he's [very good at tweeting](https://twitter.com/fortelabs). 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /content/drafts/secondbrain2/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/secondbrain2/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/secretsandwich/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-10-17 3 | title: Secret Sandwich Livestream 4 | thumbnail: ./thumb@2x.png 5 | slug: secretsandwich 6 | category: meta 7 | published: false 8 | description: "Livestream sketching sandwich ideas with Jason Lengstorf" 9 | --- 10 | 11 | import FullNote from '../../../src/components/mdx/FullNote.js' 12 | import NotesContainer from '../../../src/components/mdx/NotesContainer.js' 13 | import Link from '../../../src/components/link' 14 | import InlineSignUp from '../../../src/components/inlineSubscribe.js' 15 | import ResponsiveEmbed from 'react-responsive-embed' 16 | 17 | 18 | 19 | This week I had the pleasure of joining [Jason Lengstorf](#) on his regular livestream series [*Learn With Jason* on Twitch](https://www.twitch.tv/jlengstorf). 20 | 21 | ![Logo and Sketching with Maggie Appleton on Learn with Jason](https://static-cdn.jtvnw.net/twitch-event-images-v2/885c31a8-d954-488f-8052-2f38b08caf01-640x360) 22 | 23 | Usually he hosts developers building impressive demos like [three.js animations](https://www.youtube.com/watch?v=mXcawneCRHY), [serverless GraphQL functions](https://www.youtube.com/watch?v=U6trl0_ynuM), and [data vizualisations in React](https://www.youtube.com/watch?v=Bdeu-BFisJU&t=3271s). 24 | There's a whole [YouTube archive you can pour over](https://www.youtube.com/channel/UCnty0z0pNRDgnuoirYXnC5A/videos). 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /content/drafts/secretsandwich/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/secretsandwich/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/ternary/Layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/ternary/Layout.png -------------------------------------------------------------------------------- /content/drafts/ternary/MilkText.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/ternary/MilkText.png -------------------------------------------------------------------------------- /content/drafts/ternary/Signpost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/ternary/Signpost.png -------------------------------------------------------------------------------- /content/drafts/ternary/ThreeColumn.js: -------------------------------------------------------------------------------- 1 | import styled from '@emotion/styled' 2 | 3 | const ThreeColumn = styled.div` 4 | display: grid; 5 | grid-gap: 30px; 6 | grid-template-columns: repeat(3, minmax(120px, 1fr)); 7 | align-items: center; 8 | margin: 0 auto; 9 | @media (max-width: 545px) { 10 | grid-template-columns: 1fr; 11 | } 12 | ` 13 | export default ThreeColumn 14 | -------------------------------------------------------------------------------- /content/drafts/ternary/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-05-12 3 | title: 'Snazzy Ternary Operators Title' 4 | thumbnail: ./thumb@2x.png 5 | tags: ['JavaScript', 'Fundamentals', 'ES6'] 6 | slug: ternary 7 | category: 'illustrated notes' 8 | description: "Ternary operators are the chocolate to my peanut butter" 9 | published: true 10 | --- 11 | 12 | import ThreeColumn from './ThreeColumn' 13 | // // Note to self - styled components in the MDX folder automatically import like this: 14 | // import Divider from 'Divider' 15 | 16 |
20 | 21 | ![](./Signpost.png) 22 | 23 | 24 | 25 | Introduced in ES6 / ES 2015, the ternary operator helps us make decisions about which code to run based on a condition. 26 | 27 | It essentially does the same thing as an if/else statement, but is _way_ shorter and quicker to write. 28 | 29 | ```jsx 30 | if (problems > 99) {do this} 31 | else if (problems < 99) {do that} 32 | else if (problems === 0) {actually do this} 33 | else {or maybe this other thing} 34 | ``` 35 | 36 | If you're not familiar with if/else statements [give the docs a quick read](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 37 | 38 | 39 | 40 |
41 | 42 | ![](./Layout.png) 43 | 44 |
45 | 46 | In code it looks like this: 47 | 48 |
49 | 50 | ![](./MilkText.png) 51 | 52 |
53 | 54 |
55 | 56 | Aside from refilling the milk, it’s commonly used for X, Y, and Z 57 | 58 | 59 | 60 |

Use One

61 | 62 |

Use Two

63 | 64 |

Use Three

65 | 66 | -------------------------------------------------------------------------------- /content/drafts/ternary/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/ternary/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/vuerouter/VueRouter--thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/vuerouter/VueRouter--thumbnail.png -------------------------------------------------------------------------------- /content/drafts/vuerouter/VueRouter_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/vuerouter/VueRouter_1.png -------------------------------------------------------------------------------- /content/drafts/vuerouter/VueRouter_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/vuerouter/VueRouter_2.png -------------------------------------------------------------------------------- /content/drafts/vuerouter/VueRouter_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/vuerouter/VueRouter_3.png -------------------------------------------------------------------------------- /content/drafts/vuerouter/VueRouter_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/vuerouter/VueRouter_4.png -------------------------------------------------------------------------------- /content/drafts/vuerouter/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-01-18 3 | title: A Journey into Vue-Router 4 | thumbnail: ./thumb@2x.png 5 | slug: vuerouter 6 | description: 'The journey to the centre of the Vue-niverse all starts with routing' 7 | category: 'illustrated notes' 8 | published: true 9 | --- 10 | 11 | import VerticalSketchnote from '../../../src/components/mdx/VerticalSketchnote.js' 12 | import NotesContainer from '../../../src/components/mdx/NotesContainer.js' 13 | 14 | 15 | 16 | The journey to the centre of the Vue-niverse all starts with routing 🚂🚂🚂🌌 17 | 18 | New illustrated notes on @laurieontech's 'Journey with Vue-Router' @eggheadio course – learn to go all the places in @vuejs 👉http://bit.ly/vuerou 19 | 20 | [Laurie Barth](https://twitter.com/laurieontech) 21 | 22 | ![](https://og-image-egghead-course.now.sh/a-journey-with-vue-router) 23 | 24 |
25 | 26 | Fluff fluff fluff 27 | 28 | Fluff fluff fluff 29 | 30 | ![](./VueRouter_1.png) 31 | 32 | ![](./VueRouter_2.png) 33 | 34 | ![](./VueRouter_3.png) 35 | 36 | ![](./VueRouter_4.png) 37 | 38 | --- 39 | 40 |
41 | 42 | 43 | 44 |
45 | 46 | 47 | 48 | ![](./VueRouter--thumbnail.png) 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /content/drafts/vuerouter/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/vuerouter/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/xstate/WhatisxState--small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/xstate/WhatisxState--small.png -------------------------------------------------------------------------------- /content/drafts/xstate/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-01-22 3 | title: Become the Head of State... Management 👑 4 | thumbnail: ./thumb@2x.png 5 | slug: xstate 6 | description: "Rule over all your states with a little help from xState state machines" 7 | category: 'illustrated notes' 8 | published: true 9 | --- 10 | 11 | import NotesContainer from '../../../src/components/mdx/NotesContainer.js' 12 | 13 | 14 | 15 | Fluff fluff fluff 16 | 17 | ![](https://og-image-egghead-course.now.sh/construct-sturdy-uis-with-xstate) 18 | ![](https://og-image-egghead-course.now.sh/introduction-to-state-machines-using-xstate) 19 | 20 |
21 | 22 | Fluff fluff fluff 23 | 24 | Fluff fluff fluff 25 | 26 | ![](./xState_1.png) 27 | 28 | ![](./xState_2.png) 29 | 30 | ![](./xState_3.png) 31 | 32 | ![](./xState_4.png) 33 | 34 | --- 35 | [Kyle Shevlin](https://twitter.com/kyleshevlin) 36 | 37 | Introduction to State Machines and XState 38 | http://bit.ly/ixstate 39 | 40 | [Issac Mann](https://twitter.com/MannIsaac) 41 | 42 | Construct Sturdy UIs with XState 43 | http://bit.ly/ui-xstate 44 | 45 |

The Full Sketchnote

46 |
47 | 48 |
54 | 55 | ![](WhatisxState--small.png) 56 | 57 |
58 | 59 |

62 | Want to learn more? 63 |

64 | 65 |

69 | A high-res & printable version of the illustrated note, plus the full course 70 | is avaliable here on the{' '} 71 | 72 | The Name 73 | {' '} 74 | page. 75 |

76 | 77 | 78 | -------------------------------------------------------------------------------- /content/drafts/xstate/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/xstate/thumb@2x.png -------------------------------------------------------------------------------- /content/drafts/xstate/xState_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/xstate/xState_1.png -------------------------------------------------------------------------------- /content/drafts/xstate/xState_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/xstate/xState_2.png -------------------------------------------------------------------------------- /content/drafts/xstate/xState_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/xstate/xState_3.png -------------------------------------------------------------------------------- /content/drafts/xstate/xState_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/drafts/xstate/xState_4.png -------------------------------------------------------------------------------- /content/explainers/0_databases/DB_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/0_databases/DB_1.png -------------------------------------------------------------------------------- /content/explainers/0_databases/DB_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/0_databases/DB_2.png -------------------------------------------------------------------------------- /content/explainers/0_databases/DB_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/0_databases/DB_3.png -------------------------------------------------------------------------------- /content/explainers/0_databases/DB_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/0_databases/DB_4.png -------------------------------------------------------------------------------- /content/explainers/0_databases/DB_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/0_databases/DB_5.png -------------------------------------------------------------------------------- /content/explainers/0_databases/DB_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/0_databases/DB_6.png -------------------------------------------------------------------------------- /content/explainers/0_databases/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-05-10 3 | title: 'A Shelfish Starter Guide to Databases' 4 | thumbnail: ./thumb@2x.png 5 | slug: databases 6 | tags: ['Data', 'Databases', 'SQL'] 7 | category: explainers 8 | description: "The absolute minimum you need to know about data storage." 9 | --- 10 | 11 | import DB6 from './DB_Interactive' 12 | import Link from '../../../src/components/link' 13 | 14 | ![Databases 101 - How to build yourself a digital shelf](./DB_1.png) 15 | 16 | ![Databases are the storage shelves of the digital world. They're where we store all our masses of information.](./DB_2.png) 17 | 18 | ![Every database has a DBMS - a database management system. This structures how we organise and interact with all our stored data. We have 4 fundamental ways we interact with databases. We can create, read, update, and delete. Better known as CRUD.](./DB_3.png) 19 | 20 | ![These DBMS's come in two flavours. Relational DB's organise data in tables made of columns and rows. Columns are categories and each row inside them holds a data entry. They're highly structured and have strict data types. We talk to them using SQL - structured query language.](./DB_4.png) 21 | 22 | ![The second DB type is non-relational, also known as NoSQL. These include graph, kay value, document, and column family types. These are more flexible systems with less strictness around data types. They're good for getting a database up and running quickly since you don't have to create a strict schema before adding the data. They're also good for deploying data across decentralised distributed networks. Of the top five most popoular DBMS services, four are relational and one is NoSQL.](./DB_5.png) 23 | 24 | ![](./DB_6.png) 25 | 26 | ---- 27 | 28 |
32 | 33 | 34 | 35 | ##### Keep Learning 36 | 37 | 38 | * SQL Fundamentals course with Tyler Clark 39 | 40 | * Get Started With PostgreSQL course with Brett Cassette 41 | 42 | 43 | 44 | 45 | 46 | ##### References 47 | 48 | * Basics of NoSQL Databases by freeCodeCamp 49 | 50 | * Databases 101 by Thomas LaRock 51 | 52 | * SQL vs NoSQL: The Differences from SitePoint 53 | 54 | * What is NoSQL? from MongoDB 55 | 56 | 57 | 58 |
-------------------------------------------------------------------------------- /content/explainers/0_databases/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/0_databases/thumb@2x.png -------------------------------------------------------------------------------- /content/explainers/api/API_0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/api/API_0.png -------------------------------------------------------------------------------- /content/explainers/api/API_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/api/API_1.png -------------------------------------------------------------------------------- /content/explainers/api/API_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/api/API_2.png -------------------------------------------------------------------------------- /content/explainers/api/API_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/api/API_3.png -------------------------------------------------------------------------------- /content/explainers/api/API_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/api/API_4.png -------------------------------------------------------------------------------- /content/explainers/api/API_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/api/API_5.png -------------------------------------------------------------------------------- /content/explainers/api/API_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/api/API_6.png -------------------------------------------------------------------------------- /content/explainers/api/API_7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/api/API_7.png -------------------------------------------------------------------------------- /content/explainers/api/API_Interactive.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css, keyframes } from '@emotion/core' 3 | import Link from '../../../src/components/link' 4 | import mainImage from './interactiveIllo/mainImage' 5 | import linkImage from './interactiveIllo/linkImage' 6 | 7 | const APIs = () => { 8 | const strokeAnimation = keyframes` 9 | from, 0% { 10 | stroke-dashoffset: 1; 11 | } 12 | to, 100% { 13 | stroke-dashoffset: 20; 14 | } 15 | ` 16 | 17 | return ( 18 | 24 | 25 | 32 | 49 | 60 | 67 | 68 | 69 | 70 | ) 71 | } 72 | 73 | export default APIs 74 | -------------------------------------------------------------------------------- /content/explainers/api/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-04-10 3 | title: Meet the Robowaiter APIs Serving Us Data 4 | thumbnail: ./thumb@2x.png 5 | slug: api 6 | category: explainers 7 | tags: ['API', 'Database', 'Servers'] 8 | description: "Everything you need to know about what API's are and how they work" 9 | featured: false 10 | redirects: 'http://maggieappleton.com/api' 11 | --- 12 | 13 | import APIs from './API_Interactive' 14 | 15 | ![](./API_0.png) 16 | 17 | ![](./API_1.png) 18 | 19 | ![](./API_2.png) 20 | 21 | ![](./API_3.png) 22 | 23 | ![](./API_4.png) 24 | 25 | 26 | 27 | ![](./API_6.png) 28 | 29 | ![](./API_7.png) -------------------------------------------------------------------------------- /content/explainers/api/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/api/thumb@2x.png -------------------------------------------------------------------------------- /content/explainers/babel/Babel_Final_Sm@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/babel/Babel_Final_Sm@2x.png -------------------------------------------------------------------------------- /content/explainers/babel/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-01-02 3 | title: What the Fork is Babel.js? 4 | thumbnail: ./thumb@2x.png 5 | image: ./Babel_Final_Sm@2x.png 6 | slug: babel 7 | category: explainers 8 | tags: ['Babel', 'JavaScript', 'Compilers'] 9 | description: 'Just like the interstellar Babelfish, Babel.js is a universal translator for JavaScript. But more practical and less cosmic.' 10 | featured: false 11 | --- 12 | 13 | ![Babel is a translator that turns different varieties of JS into ES5 - a commonly shared version](./Babel_Final_Sm@2x.png) 14 | 15 | -------------------------------------------------------------------------------- /content/explainers/babel/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/babel/thumb@2x.png -------------------------------------------------------------------------------- /content/explainers/compilers/Compile_Transpile_Final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/compilers/Compile_Transpile_Final.png -------------------------------------------------------------------------------- /content/explainers/compilers/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-01-07 3 | title: How Are Compilers & Transpilers Different? 4 | thumbnail: ./thumb@2x.png 5 | image: ./Compile_Transpile_Final.png 6 | tags: ['Binary', 'Compilers'] 7 | slug: compilers 8 | category: explainers 9 | featured: false 10 | --- 11 | 12 | 13 | 14 | ![Compilers and Transpilers](./Compile_Transpile_Final.png) 15 | -------------------------------------------------------------------------------- /content/explainers/compilers/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/compilers/thumb@2x.png -------------------------------------------------------------------------------- /content/explainers/drawinvisiblethings1/Feature.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from '../../../src/components/link.js' 3 | import { css } from '@emotion/core' 4 | import { bpMinMD } from '../../../src/utils/breakpoints.js' 5 | 6 | const Feature = props => { 7 | return ( 8 | 28 |
29 |
{props.illustrator}
30 | 31 |

{props.sourceTitle}

32 | 33 |

{props.children}

34 |
35 | {props.sourceTitle} 36 | 37 | ) 38 | } 39 | 40 | export default Feature 41 | -------------------------------------------------------------------------------- /content/explainers/drawinvisiblethings1/Illustration_Cake800@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/drawinvisiblethings1/Illustration_Cake800@2x.png -------------------------------------------------------------------------------- /content/explainers/drawinvisiblethings1/MultipartIntro.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import { bpMinMD } from '../../../src/utils/breakpoints.js' 4 | import Link from '../../../src/components/link.js' 5 | 6 | const PartName = props => { 7 | return ( 8 | 9 |

20 | {props.partName} 21 |

22 | {props.focus ? You are here : null} 23 | 24 | ) 25 | } 26 | 27 | const MultipartIntro = () => { 28 | return ( 29 |
92 |
93 | Part 1 94 | 95 |
96 |
97 | Part 2 98 | 99 |
100 |
101 | Part 3 102 | 103 |
104 |
105 | Part 4 106 | 107 |
108 |
109 | ) 110 | } 111 | 112 | export default MultipartIntro 113 | -------------------------------------------------------------------------------- /content/explainers/drawinvisiblethings1/Techtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/drawinvisiblethings1/Techtools.png -------------------------------------------------------------------------------- /content/explainers/drawinvisiblethings1/abstractiontower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/drawinvisiblethings1/abstractiontower.png -------------------------------------------------------------------------------- /content/explainers/drawinvisiblethings1/frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/drawinvisiblethings1/frame.png -------------------------------------------------------------------------------- /content/explainers/drawinvisiblethings1/hide-highlight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/drawinvisiblethings1/hide-highlight.png -------------------------------------------------------------------------------- /content/explainers/drawinvisiblethings1/mapping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/drawinvisiblethings1/mapping.png -------------------------------------------------------------------------------- /content/explainers/drawinvisiblethings1/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/drawinvisiblethings1/thumb@2x.png -------------------------------------------------------------------------------- /content/explainers/drawinvisiblethings1/timeismoney.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/drawinvisiblethings1/timeismoney.png -------------------------------------------------------------------------------- /content/explainers/fruit-comparison/FruitComparison_P1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/fruit-comparison/FruitComparison_P1.png -------------------------------------------------------------------------------- /content/explainers/fruit-comparison/FruitComparison_P2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/fruit-comparison/FruitComparison_P2.png -------------------------------------------------------------------------------- /content/explainers/fruit-comparison/FruitComparison_P3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/fruit-comparison/FruitComparison_P3.png -------------------------------------------------------------------------------- /content/explainers/fruit-comparison/FruitComparison_P4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/fruit-comparison/FruitComparison_P4.png -------------------------------------------------------------------------------- /content/explainers/fruit-comparison/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-01-14 3 | title: A Fruitful Guide to JavaScript's Comparison Operators 4 | thumbnail: ./thumb@2x.png 5 | image: ./FruitComparison_P1.png 6 | category: explainers 7 | tags: ['Operators', 'JavaScript', 'Fundamentals'] 8 | slug: fruit-comparison 9 | featured: false 10 | --- 11 | 12 | 13 | 14 | ![Javascript's comparison operators give us a way of comparing values](./FruitComparison_P1.png) 15 | 16 | 17 | ![Equality comes in loose and strict varieties. You should always use strict equality.](./FruitComparison_P2.png) 18 | 19 | 20 | ![Inequality follows the same loose and strict rules as equality](./FruitComparison_P3.png) 21 | 22 | 23 | ![Relational equality let's us check which value is greater](./FruitComparison_P4.png) 24 | -------------------------------------------------------------------------------- /content/explainers/fruit-comparison/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/fruit-comparison/thumb@2x.png -------------------------------------------------------------------------------- /content/explainers/jsx/JSX_Final@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/jsx/JSX_Final@2x.png -------------------------------------------------------------------------------- /content/explainers/jsx/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-01-21 3 | title: The Glorious Lovechild of JSX 4 | thumbnail: ./thumb@2x.png 5 | image: ./JSX_Final@2x.png 6 | tags: ['React', 'Syntax', 'JavaScript'] 7 | slug: jsx 8 | category: explainers 9 | 10 | featured: false 11 | --- 12 | 13 | 14 | 15 | ![JSX is like the lovechild of HTML and JS. It mixes the best of both worlds.](./JSX_Final@2x.png) 16 | -------------------------------------------------------------------------------- /content/explainers/jsx/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/jsx/thumb@2x.png -------------------------------------------------------------------------------- /content/explainers/maintainers-podcast/babel_crop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/maintainers-podcast/babel_crop.png -------------------------------------------------------------------------------- /content/explainers/maintainers-podcast/spot_gift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/maintainers-podcast/spot_gift.png -------------------------------------------------------------------------------- /content/explainers/maintainers-podcast/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/maintainers-podcast/thumb@2x.png -------------------------------------------------------------------------------- /content/explainers/react-vdom/ReactVDom_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/react-vdom/ReactVDom_1@2x.png -------------------------------------------------------------------------------- /content/explainers/react-vdom/ReactVDom_2@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/react-vdom/ReactVDom_2@2x.png -------------------------------------------------------------------------------- /content/explainers/react-vdom/ReactVDom_3@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/react-vdom/ReactVDom_3@2x.png -------------------------------------------------------------------------------- /content/explainers/react-vdom/ReactVDom_4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/react-vdom/ReactVDom_4@2x.png -------------------------------------------------------------------------------- /content/explainers/react-vdom/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-02-02 3 | title: What the Fork is the React Virtual DOM? 4 | thumbnail: ./thumb@2x.png 5 | image: ./ReactVDom_1@2x.png 6 | tags: ['React', 'DOM', 'Algorithms'] 7 | category: explainers 8 | 9 | slug: react-vdom 10 | featured: false 11 | --- 12 | 13 | ![One of the reasons React is so darn fast at updating changes is that it uses a virtual DOM](./ReactVDom_1@2x.png) 14 | 15 | ![All the code we write in React only interacts with this virtual DOM](./ReactVDom_2@2x.png) 16 | 17 | ![This is helpful because passing the actual DOM lots of changes is slow](./ReactVDom_3@2x.png) 18 | 19 | ![React's DOM runs a diffing algorithm](./ReactVDom_4@2x.png) 20 | -------------------------------------------------------------------------------- /content/explainers/react-vdom/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/react-vdom/thumb@2x.png -------------------------------------------------------------------------------- /content/explainers/spread/Spread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/spread/Spread.png -------------------------------------------------------------------------------- /content/explainers/spread/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-02-12 3 | title: Fun with Foliage and JavaScript's ...spread Operator 4 | thumbnail: ./thumb@2x.png 5 | image: ./Spread.png 6 | tags: ['Operators', 'Arrays', 'ES6'] 7 | slug: spread 8 | category: explainers 9 | featured: false 10 | --- 11 | 12 | 13 | 14 | ![JavaScript's spread operator copies the content of one array, and dumps them out into another](./Spread.png) 15 | -------------------------------------------------------------------------------- /content/explainers/spread/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/explainers/spread/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/advancedjs/AdvancedJS--small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/advancedjs/AdvancedJS--small.png -------------------------------------------------------------------------------- /content/illustratednotes/advancedjs/AdvancedJS_1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/advancedjs/AdvancedJS_1@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/advancedjs/AdvancedJS_2@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/advancedjs/AdvancedJS_2@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/advancedjs/AdvancedJS_3@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/advancedjs/AdvancedJS_3@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/advancedjs/AdvancedJS_4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/advancedjs/AdvancedJS_4@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/advancedjs/AdvancedJS_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/advancedjs/AdvancedJS_5.png -------------------------------------------------------------------------------- /content/illustratednotes/advancedjs/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-12-28 3 | title: "The JavaScript Bits You Skipped the First Time Around" 4 | description: "It's time to stop pretending you understand where the `this` keyword is pointing" 5 | thumbnail: ./thumb@2x.png 6 | slug: advancedjs 7 | category: 'illustrated notes' 8 | published: true 9 | --- 10 | 11 | 12 | 13 |

Being humans, we rarely learn things linearly. 14 | No one begins their JavaScript journey by reading the TC39 language specification line-by-line like a pedantic masochist.

15 | 16 | Instead we all cobble together a good-enough understanding, leaving holes here and there to fill in later. 17 | 18 | So far I've stumbled along without 100% grokking prototypical inheritance, or how `call, apply,` and `bind` work on functions. 19 | It's fine. Stuff mostly works. Until it doesn't ¯\_(ツ)_/¯ 20 | 21 | But at some point, it's useful to stop stumbling about and peek back at those holes. 22 | 23 |

Tyler Clark latest course on Advanced JavaScript Foundations is exactly that hole-filling opportunity.

24 | 25 | 26 | 27 | 28 | Course illustration of a building with a bright yellow foundation floor for advanced javascript foundations 29 | 30 | 31 | 32 | Tyler runs through all the details that usually get skipped over in beginners tutorials. The ones that make a huge difference when you're deep in a debugging session, and can't figure out where the f🍪🍩k `this` is pointing and why all your results are `undefined`. 33 | 34 |
35 | 36 | Here's some of my sketch notes from the course – they include plenty of DNA inheritence metaphors 🧬 and a few cups of caffiene to keep you alert. 37 | 38 |
39 | 40 | ![Advanced JS fundamentals title slide](./AdvancedJS_1@2x.png) 41 | 42 | ![The primitive types are not objects, have no methods, and can't be mutated.](./AdvancedJS_2@2x.png) 43 | 44 | ![Prototypes are how we do inheritance in JS. They're linked objects of parents and children that pass down inherited properties. All JS objects are made from a default prototype that includes the __proto__ property](./AdvancedJS_3@2x.png) 45 | 46 | ![.prototype is different to __proto__. It's a method on a function that points to a constructor object.](./AdvancedJS_5.png) 47 | 48 |
49 | 50 | ![The this keyword points to an object based on the execution context of where a function is called, not where it's defined.](./AdvancedJS_4@2x.png) 51 | 52 |
53 | 54 | Hopefully these gave you a sense of the main concepts, and a small map of where your own JavaScript 🕳 holes are (or lack of holes if you've already diligently filled them in!) 55 | 56 | --- 57 | 58 | 59 | 60 | ![The full advanced JS fundamentals illustrated note](./AdvancedJS--small.png) 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /content/illustratednotes/advancedjs/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/advancedjs/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/customhooks/customhooks-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/customhooks/customhooks-1.png -------------------------------------------------------------------------------- /content/illustratednotes/customhooks/customhooks-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/customhooks/customhooks-2.png -------------------------------------------------------------------------------- /content/illustratednotes/customhooks/customhooks-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/customhooks/customhooks-3.png -------------------------------------------------------------------------------- /content/illustratednotes/customhooks/customhooks-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/customhooks/customhooks-4.png -------------------------------------------------------------------------------- /content/illustratednotes/customhooks/customhooks-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/customhooks/customhooks-5.png -------------------------------------------------------------------------------- /content/illustratednotes/customhooks/customhooks-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/customhooks/customhooks-mini.png -------------------------------------------------------------------------------- /content/illustratednotes/customhooks/shareable-custom-hooks-in-react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/customhooks/shareable-custom-hooks-in-react.png -------------------------------------------------------------------------------- /content/illustratednotes/customhooks/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/customhooks/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/cypress/CyTesting01@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/cypress/CyTesting01@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/cypress/CyTesting02@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/cypress/CyTesting02@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/cypress/CyTesting03@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/cypress/CyTesting03@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/cypress/Cypress_Sketchnotes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/cypress/Cypress_Sketchnotes.png -------------------------------------------------------------------------------- /content/illustratednotes/cypress/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-05-10 3 | title: Testing with Cypress.io 4 | thumbnail: ./thumb@2x.png 5 | description: null 6 | slug: cypress 7 | category: 'illustrated notes' 8 | published: true 9 | featured: false 10 | --- 11 | 12 |
13 | 14 | As part of my everyday [egghead](https://egghead.io) work, I make a lot of notes. Illustrated in particular. 15 | 16 | Everytime we have a new course in production, I'll watch all the video lessons and illustrate the major points. 17 | These help me give ideas for visuals and diagrams we can build on top of the lessons. 18 | 19 | At the moment we've got one in the pipeline by [Brett Cassette](http://twitter.com/brettcassette) all about testing with [Cypress.io](https://www.cypress.io/). 20 | 21 | Here's a small preview of it: 22 | 23 | ![Cypress.io is a handy tool is "end to end" testing](./CyTesting01@2x.png) 24 | 25 | ![It includes all levels of the stack - from the UI to front-end data stores, to XHR, to APIs, to your database. It's able to test all of these at the same time. It runs a virtual browser that clicks through all the things on all the pages.](./CyTesting02@2x.png) 26 | 27 | ![It lets us write custom tests that "assert" true or false statements on specific parts of our app. It also alerts us if any of those tests fail. The tool uses the chai assertion library which makes it easy to write chains of selectors.](./CyTesting03@2x.png) 28 | 29 | --- 30 | 31 |

The Whole Illustrated Note

32 | 33 |
34 | 35 |
37 | 38 | ![The full cypress.io illustrated note](./Cypress_Sketchnotes.png) 39 | 40 |
41 | 42 | A giant, printable version will be posted on the [Test Production Ready Apps with Cypress](https://egghead.io/courses/test-production-ready-apps-with-cypress?rc=272bjb) course when it's released later this month. 43 | 44 |
45 | -------------------------------------------------------------------------------- /content/illustratednotes/cypress/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/cypress/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/es2019-sketchnotes-1-Optional.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/es2019-sketchnotes-1-Optional.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/es2019-sketchnotes-2-Stable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/es2019-sketchnotes-2-Stable.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/es2019-sketchnotes-3-Flatten.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/es2019-sketchnotes-3-Flatten.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/es2019-sketchnotes-4-FlatMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/es2019-sketchnotes-4-FlatMap.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/es2019-sketchnotes-5-Trim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/es2019-sketchnotes-5-Trim.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/es2019-sketchnotes-6-Symbol.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/es2019-sketchnotes-6-Symbol.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/es2019-sketchnotes-7-ObjectEntries.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/es2019-sketchnotes-7-ObjectEntries.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/es2019-sketchnotes-Intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/es2019-sketchnotes-Intro.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/es2019-sketchnotes-Title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/es2019-sketchnotes-Title.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/es2019_sketchnotes--mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/es2019_sketchnotes--mini.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-23 3 | title: A Fresh Serving of JavaScript ES2019 4 | thumbnail: ./thumb@2x.png 5 | description: null 6 | slug: es2019 7 | category: 'illustrated notes' 8 | published: true 9 | featured: false 10 | --- 11 | 12 | 13 | 14 | 15 |
16 | 17 | ![Fresh new Javascript ES2019](./es2019-sketchnotes-Title.png) 18 | 19 |
20 | 21 | ![The latest language update from the TC39 committee - the people who govern the JS language](./es2019-sketchnotes-Intro.png) 22 | 23 |

A new version of JavaScript has landed!

24 | 25 | Every year JavaScript gets a handful of new features and functions for everyone to play with. 26 | 27 | The [TC39 committee](https://tc39.es/) have now released the 2019 additions to [ECMAScript](https://www.ecma-international.org/memento/tc39.htm), which is the generally accepted version of JavaScript we all know and ~~love~~ tolerate. 28 | 29 | You can take a look at the [TC39 Github](https://github.com/tc39) to track the progress of proposed features, including [all the ones they've accepted into the official language] (https://github.com/tc39/proposals/blob/master/finished-proposals.md). 30 | 31 |
32 | 33 | Mike Sherov just put together a new egghead course on [Javascript ES2019 in Practice](https://egghead.io/courses/javascript-es2019-in-practice?af=54fd64) which is a good summary of all the new shiny bits, as well as how they apply in IRL dev situations. 34 | 35 | 36 | 37 | ![Javascript ES2019 Course Illustration](./javascript-es2019-in-practice.jpg) 38 | 39 | 40 | 41 | I drew up my own notes on the 7 big changes: 42 | 43 | * Optional Catch Binding 44 | * Stable `array.sort()` 45 | * Flatten Arrays with `flat()` 46 | * Flatten & Map Arrays with `flatMap()` 47 | * Cut out Whitespace with `trimStart()` & `trimEnd()` 48 | * Descriptions on Symbols 49 | * Create Objects from Entries with `fromEntries()` 50 | 51 |
52 | 53 | 54 | ![Optional Catch Binding](./es2019-sketchnotes-1-Optional.png) 55 | 56 |
57 | 58 | ![Stable array.sort](./es2019-sketchnotes-2-Stable.png) 59 | 60 |
61 | 62 | ![Flatten Arrays with flat](./es2019-sketchnotes-3-Flatten.png) 63 | 64 |
65 | 66 | ![Flatten & Map Arrays with flatMap](./es2019-sketchnotes-4-FlatMap.png) 67 | 68 |
69 | 70 | ![Cut out Whitespace with trimStart & trimEnd](./es2019-sketchnotes-5-Trim.png) 71 | 72 |
73 | 74 | ![Descriptions on Symbols](./es2019-sketchnotes-6-Symbol.png) 75 | 76 |
77 | 78 | ![Create Objects from Entries with fromEntries](./es2019-sketchnotes-7-ObjectEntries.png) 79 | 80 | 81 |
82 | 83 | Note that the space theme going on here has less to do with ES2019 and more to do with me watching [Apollo 11](https://www.imdb.com/title/tt8760684/) last week. 84 | _(Five stars, would recommend)_. 85 | 86 |
87 | 88 | --- 89 | 90 | 91 | 92 | ![The full JavaScript ES2019 illustrated note](./es2019_sketchnotes--mini.png) 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /content/illustratednotes/es2019/javascript-es2019-in-practice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/javascript-es2019-in-practice.jpg -------------------------------------------------------------------------------- /content/illustratednotes/es2019/javascript-es2019-in-practice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/javascript-es2019-in-practice.png -------------------------------------------------------------------------------- /content/illustratednotes/es2019/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/es2019/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/gatsby-contentful/build-content-rich-progressive-web-apps-with-gatsby-and-contentful.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/gatsby-contentful/build-content-rich-progressive-web-apps-with-gatsby-and-contentful.png -------------------------------------------------------------------------------- /content/illustratednotes/gatsby-contentful/gatsbycontentful1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/gatsby-contentful/gatsbycontentful1.png -------------------------------------------------------------------------------- /content/illustratednotes/gatsby-contentful/gatsbycontentful2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/gatsby-contentful/gatsbycontentful2.png -------------------------------------------------------------------------------- /content/illustratednotes/gatsby-contentful/gatsbycontentful3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/gatsby-contentful/gatsbycontentful3.png -------------------------------------------------------------------------------- /content/illustratednotes/gatsby-contentful/gatsbycontentful4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/gatsby-contentful/gatsbycontentful4.png -------------------------------------------------------------------------------- /content/illustratednotes/gatsby-contentful/gatsbycontentful_sketchnotes--mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/gatsby-contentful/gatsbycontentful_sketchnotes--mini.png -------------------------------------------------------------------------------- /content/illustratednotes/gatsby-contentful/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-01 3 | title: Jamming with the JAMStack, Gatsby & Contentful 4 | description: null 5 | thumbnail: ./thumb@2x.png 6 | slug: contentful-gatsby 7 | category: 'illustrated notes' 8 | published: true 9 | --- 10 | 11 | 12 | 13 | 14 | If you've been keeping up with the sweetest new static-site generation tools, you'll have heard of the JAMstack. And if you havent, Jamstack WTF explains it well.}>1 15 | 16 | 17 | The TLDR here is that combining Javascript, APIs, and Markup (JAM) makes it easy to build sites that work well across all kinds of devices and data loading speeds. Which, like jam, makes everyone happy. 18 | 19 |
20 | 21 |

Gatsby and Contentful are the power couple of the JAMstack. They're tools built for the task, and a fantastic combination if you're building with JAM for the first time.

22 | 23 |

Khaled Garbaya created a whole egghead course that walks you through hooking these two up.

24 | 25 | 26 | 27 | ![Course illustration of contentful media running into a Gatsby machine, for the Build Content Rich Progressive Web Apps with Gatsby and Contentful course](./build-content-rich-progressive-web-apps-with-gatsby-and-contentful.png) 28 | 29 | 30 | 31 | I'm keen on Gatsby since this whole site is built with it. Working through the course filled in quite a few holes I had around it's inner workings. 32 | 33 | As usual, I made sure to take notes: 34 | 35 | ![Build progressive web apps with contentful and gatsby](./gatsbycontentful1.png) 36 | 37 | ![The JAM stack is a new way to build web apps for speed and scalability. It uses Javascript, APIs, and Markup.](./gatsbycontentful2.png) 38 | 39 | ![These two work well together - contentful feeds the data into gatsby. You structure all your content inside contentful, which then goes into gatsby through the gatsby-source-contentful plugin.](./gatsbycontentful3.png) 40 | 41 | ![We can create new pages for our site inside gatsby-node.js. The gatsby node API gives us a creatPage action](./gatsbycontentful4.png) 42 | 43 | --- 44 | 45 | 46 | 47 | ![The full gatsby and contentful illustrated note](./gatsbycontentful_sketchnotes--mini.png) 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /content/illustratednotes/gatsby-contentful/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/gatsby-contentful/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/graphql/graphql-query-language.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/graphql/graphql-query-language.png -------------------------------------------------------------------------------- /content/illustratednotes/graphql/graphql1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/graphql/graphql1.png -------------------------------------------------------------------------------- /content/illustratednotes/graphql/graphql2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/graphql/graphql2.png -------------------------------------------------------------------------------- /content/illustratednotes/graphql/graphql3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/graphql/graphql3.png -------------------------------------------------------------------------------- /content/illustratednotes/graphql/graphql4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/graphql/graphql4.png -------------------------------------------------------------------------------- /content/illustratednotes/graphql/graphql_sketchnotes--mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/graphql/graphql_sketchnotes--mini.png -------------------------------------------------------------------------------- /content/illustratednotes/graphql/og-graphql-query-language.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/graphql/og-graphql-query-language.jpg -------------------------------------------------------------------------------- /content/illustratednotes/graphql/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/graphql/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/immer/immer-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/immer/immer-1.png -------------------------------------------------------------------------------- /content/illustratednotes/immer/immer-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/immer/immer-2.png -------------------------------------------------------------------------------- /content/illustratednotes/immer/immer-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/immer/immer-3.png -------------------------------------------------------------------------------- /content/illustratednotes/immer/immer-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/immer/immer-4.png -------------------------------------------------------------------------------- /content/illustratednotes/immer/immer-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/immer/immer-mini.png -------------------------------------------------------------------------------- /content/illustratednotes/immer/immutable-javascript-data-structures-with-immer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/immer/immutable-javascript-data-structures-with-immer.jpg -------------------------------------------------------------------------------- /content/illustratednotes/immer/robo-socks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/immer/robo-socks.png -------------------------------------------------------------------------------- /content/illustratednotes/immer/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/immer/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/react360/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-05-14 3 | title: Building VR Apps with React360 Notes 4 | thumbnail: ./thumb@2x.png 5 | description: null 6 | slug: react360 7 | category: 'illustrated notes' 8 | published: true 9 | --- 10 | 11 | 12 | 13 | 14 | Turns out you can build almost anything in React now... including VR and AR apps inside a web browser. 15 | 16 | There's a version of React called 'React 360' that simplifies the otherwise niche and overly-complex challenge of making things fly around in virtual 3D space. 17 | 18 |

Tomasz Lakomy made an entire egghead course that walks you through building VR Applications Using React 360

19 | 20 | 21 | 22 | Course illustration of objects in 3D space 23 | 24 | 25 | 26 | I've been sketching out notes on some of the basic concepts while watching the lessons. 27 | 28 | ![VR apps with React 360](./react360_p1@2x.png) 29 | 30 | ![Let's us build 3D and VR apps on the web - without needing to learn crazy complex tools like WebGL. Instead we can just use React!](./react360_p2@2x.png) 31 | 32 | ![Uses flexbox for layouts. On the web it flexes across rows by default. But in VR it flexes downwards in a stacked columns. To add CSS styles to our views, we make a special React 360 stylesheet and then we pass them to the style tag.](./react360_p3@2x.png) 33 | 34 | ![Add 3D models to your components with the Entity tag. We can apply CSS transforms to these.](./react360_p4@2x.png) 35 | 36 | --- 37 | 38 | 39 | 40 | ![The full React 360 illustrated note](./react360_full@2x.png) 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /content/illustratednotes/react360/react360_full@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/react360/react360_full@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/react360/react360_p1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/react360/react360_p1@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/react360/react360_p2@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/react360/react360_p2@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/react360/react360_p3@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/react360/react360_p3@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/react360/react360_p4@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/react360/react360_p4@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/react360/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/react360/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/react360/vr-applications-using-react-360.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/react360/vr-applications-using-react-360.jpg -------------------------------------------------------------------------------- /content/illustratednotes/reactgirls/ReactJSG1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/reactgirls/ReactJSG1.png -------------------------------------------------------------------------------- /content/illustratednotes/reactgirls/ReactJSG2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/reactgirls/ReactJSG2.png -------------------------------------------------------------------------------- /content/illustratednotes/reactgirls/ReactJSG3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/reactgirls/ReactJSG3.png -------------------------------------------------------------------------------- /content/illustratednotes/reactgirls/ReactJSG4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/reactgirls/ReactJSG4.png -------------------------------------------------------------------------------- /content/illustratednotes/reactgirls/ReactJSG5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/reactgirls/ReactJSG5.png -------------------------------------------------------------------------------- /content/illustratednotes/reactgirls/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-05-05 3 | title: React.js Girls 2019 Conference 4 | thumbnail: ./thumb@2x.png 5 | description: null 6 | slug: reactgirls 7 | category: 'illustrated notes' 8 | published: true 9 | redirects: 'http://maggieappleton.com/' 10 | --- 11 | 12 | 13 | 14 | 15 | Earlier this year I was lucky enough to attend the ReactJS Girls Conference here in London. 16 | As you might have guessed, it involved a lot of React and a lot of great female speakers. 17 | 18 | While listening to Manjula Dube explain React hooks, and Marcy Sutton walk us through making React components accessible, I spent the day doodling flying components and functions and props on my iPad. 19 | 20 |
21 | 22 | ![Sketches from the 2019 React JS Girls conference in London](./ReactJSG1.png) 23 | 24 | ![Sketches from the 2019 React JS Girls conference in London](./ReactJSG5.png) 25 | 26 | I always enjoy fun-drawing at conferences where I'm just an attendee, and not there as an official sketchnoter (something I occasionally do professionally) 27 | 28 | 29 | 30 | ![Sketches from the 2019 React JS Girls conference in London](./ReactJSG3.png) 31 | 32 | 33 | 34 | 35 | These aren't well-crafted summaries of the content. 36 | They're just a product of me relaxing while listening. 37 | Though they loosely relate to what's happening on stage. 38 | 39 |
40 | 41 | 42 | ![Sketches from the 2019 React JS Girls conference in London](./ReactJSG2.png) 43 | 44 | ![Sketches from the 2019 React JS Girls conference in London](./ReactJSG4.png) 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /content/illustratednotes/reactgirls/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/reactgirls/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb1-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb1-1.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb1-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb1-2.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb1-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb1-3.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb1-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb1-4.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb2-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb2-1.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb2-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb2-2.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb2-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb2-3.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb3-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb3-1.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb3-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb3-2.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb3-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb3-3.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb4-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb4-1.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb4-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb4-2.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb4-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb4-3.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/Basb4-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/Basb4-4.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-09-17 3 | title: How to Build a Second Brain – Part 1 4 | thumbnail: ./thumb@2x.png 5 | slug: secondbrain1 6 | category: 'illustrated notes' 7 | published: true 8 | description: "Illustrated notes on the Building A Second Brain system by Tiago Forte" 9 | redirects: 'https://maggieappleton.com/basb' 10 | --- 11 | 12 | import InlineSignUp from '../../../src/components/inlineSubscribe.js' 13 | 14 | 15 | 16 | This is little different to my usual topics. 17 | It's not explicitly about how to build things on the internet. 18 | But I think you'll appreciate it anyway. 19 | 20 |
21 | 22 | ### I've been taking a course called Building a Second Brain by Tiago Forte. 23 | 24 | Much like it sounds, Building a Second Brain is about creating a reliable system – outside your physical skin-and-bone bodily boundaries – for storing, organising, digesting, and eventually transforming information into Good Creative Output. 25 | 26 | Given that development work heavily involves designing systems and strutures, it's an approach to personal knowledge management that will feel intuitive for dev-like-minds. 27 | 28 | Here are my illustrated notes from the first 4 parts of the course. 29 | 30 | --- 31 | 32 | ![Building a second brain (BASB) illustrated notes on the PARA system of organising content projects, areas, resources, and archives](./Basb1-1.png) 33 | ![BASB sketchnotes on putting projects in priority order and defining the desired outcome](./Basb1-2.png) 34 | ![BASB sketchnotes on wiping the slate clean and setting up PARA as a folder structure](./Basb1-3.png) 35 | ![BASB sketchnotes on creating metaplans before you start your project](./Basb1-4.png) 36 | 37 | --- 38 | 39 | ![BASB sketchnotes on digital cognition and building a personal knowledge base](./Basb2-1.png) 40 | ![BASB sketchnotes on your notes being unpolished, personal, open-ended, and diverse](./Basb2-2.png) 41 | ![BASB sketchnotes on considering 12 favourite problems to focus on](./Basb2-3.png) 42 | 43 | --- 44 | 45 | ![BASB sketchnotes on balancing discoverability with understanding in your notes](./Basb3-1.png) 46 | ![BASB sketchnotes on putting your notes through 5 layers of progressive summarisation](./Basb3-2.png) 47 | ![BASB sketchnotes on focusing on what resonates when summarising your notes](./Basb3-3.png) 48 | 49 | --- 50 | 51 | ![BASB sketchnotes on thinking of return on attention like ROI](./Basb4-1.png) 52 | ![BASB sketchnotes on flow state as the pinnacle of experience, learning, and performance. As well as the biochemistry of flow state.](./Basb4-2.png) 53 | ![BASB sketchnotes on solving the interruptability of flow with placeholding and breaking work down into smaller packets](./Basb4-3.png) 54 | ![BASB sketchnotes on wrestling with knowledge by interacting with it in meanginful ways](./Basb4-4.png) 55 | 56 | --- 57 | To be clear there's no affiliate links or kickback involved in these notes. 58 | I'm not being paid to say nice things about the course. 59 | 60 | Tiago's ideas and systems are just good. 61 | He thinks everything through in a way that feels rare on the insta-internet. 62 | 63 | Hope it gave you a bit of insight into the BASB system. 64 | There's plenty more to explore on Tiago's Forte Labs Blog and he's good at tweeting. 65 | 66 | 67 |

Read Part 2 of these notes 👉

68 | 69 | 70 | --- 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain1/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain1/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain2/Basb5-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain2/Basb5-1.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain2/Basb5-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain2/Basb5-2.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain2/Basb5-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain2/Basb5-3.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain2/Basb5-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain2/Basb5-4.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain2/Basb6-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain2/Basb6-1.png -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain2/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-04-04 3 | title: How to Build a Second Brain – Part 2 4 | thumbnail: ./thumb@2x.png 5 | slug: secondbrain2 6 | category: 'illustrated notes' 7 | published: true 8 | description: "Illustrated notes on the Building A Second Brain system by Tiago Forte" 9 | redirects: 'https://maggieappleton.com/basb' 10 | --- 11 | 12 | import InlineSignUp from '../../../src/components/inlineSubscribe.js' 13 | 14 | 15 | 16 | After a slight delay and many, many email requests, I've finished off my illustrated notes on the Building a Second Brain course. Thank you everyone for the gentle nudges to get these published 😉 17 | 18 | 19 |

If you haven't read Part 1 yet, head there first 👉

20 | 21 | 22 | --- 23 | 24 | Since taking the course in September of 2019, I've been continously building and evolving my second brain. 25 | 26 | Much like any well-integrated tool, the mental distance between you and the system grows small. 27 | It's a lovely little closed feedback loop – a cybernetic system. 28 | At this point almost all of my daily workflow revolves around my second brain. Links, articles, books, papers, podcasts, and half-formed thoughts go in. 29 | These build into notes and develop over time – they merge, meander, and mature into talks and blog posts and illustrations. 30 | It is hard to remember what my workflow looked like without it. 31 | 32 | For tools I'm currently using Roam Research, backed up by Keyboard Maestro for some fancy automation elements. 33 | 34 | These notes cover the last two sections of the course. Enjoy! 35 | 36 | --- 37 | 38 | ![Just in time project management helps us balance our workflow between capture and delivery.](./Basb5-1.png) 39 | ![Your orderly system of notes is like mise en place – everything in its place](./Basb5-2.png) 40 | ![We need flexible strategies, not static workflows. We diagnose the problem, form a guiding policy to tackle it, and write an action plan to implement it. ](./Basb5-3.png) 41 | ![Some workflow strategies we can use include context switching, changing the form of our notes, and adding colour commentary through annotations and highlights.](./Basb5-4.png) 42 | 43 | --- 44 | 45 | ![The final section of BASB covers how to make a personal knowledge management canvas](./Basb6-1.png) 46 | 47 | --- 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /content/illustratednotes/secondbrain2/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/secondbrain2/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/vuesocket/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-05-20 3 | title: Instachatting with Vue & Socket.io 4 | thumbnail: ./thumb@2x.png 5 | description: null 6 | slug: vuesocket 7 | category: 'illustrated notes' 8 | published: true 9 | --- 10 | 11 | 12 | 13 | The *intantness* of chat apps has always been a mystery to me. 14 | The technical details of moving emojis through The Internet Pipes and across continents in 0.004 miliseconds is well beyond my paygrade. 15 | 16 | But I got a tiny window of insight into the magic this week while illustrating notes for Mark Barton's new course 17 | 18 | 19 | 20 | Course illustration of a Vue logo and multiple chat bubble floating above it 21 | 22 | 23 | 24 | It's on building an instant chat app with Vue.js and Socket.io. 25 | 26 | ![](./vuesocket1.png) 27 | 28 | Turns out it's not magic, but instead done through websockets. Which are like little portals that hold open a consistent connection between two machines. 29 | 30 | I obviously still haven't a clue what goes on inside that dark little portal. Thankfully using tools like Vue & Socket.io save us from that level of depth. 31 | 32 | ![](./vuesocket2.png) 33 | 34 | ![](./vuesocket3.png) 35 | 36 | --- 37 | 38 | 39 | 40 | ![](./vuesocket_sketchnotes--mini.png) 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /content/illustratednotes/vuesocket/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/vuesocket/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/vuesocket/vue-and-socket-io-for-real-time-communication.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/vuesocket/vue-and-socket-io-for-real-time-communication.jpg -------------------------------------------------------------------------------- /content/illustratednotes/vuesocket/vuesocket1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/vuesocket/vuesocket1.png -------------------------------------------------------------------------------- /content/illustratednotes/vuesocket/vuesocket2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/vuesocket/vuesocket2.png -------------------------------------------------------------------------------- /content/illustratednotes/vuesocket/vuesocket3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/vuesocket/vuesocket3.png -------------------------------------------------------------------------------- /content/illustratednotes/vuesocket/vuesocket_sketchnotes--mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/vuesocket/vuesocket_sketchnotes--mini.png -------------------------------------------------------------------------------- /content/illustratednotes/websecurity/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/websecurity/thumb@2x.png -------------------------------------------------------------------------------- /content/illustratednotes/websecurity/web-security-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/websecurity/web-security-1.png -------------------------------------------------------------------------------- /content/illustratednotes/websecurity/web-security-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/websecurity/web-security-2.png -------------------------------------------------------------------------------- /content/illustratednotes/websecurity/web-security-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/websecurity/web-security-3.png -------------------------------------------------------------------------------- /content/illustratednotes/websecurity/web-security-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/websecurity/web-security-4.png -------------------------------------------------------------------------------- /content/illustratednotes/websecurity/web-security-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/websecurity/web-security-5.png -------------------------------------------------------------------------------- /content/illustratednotes/websecurity/web-security-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/websecurity/web-security-6.png -------------------------------------------------------------------------------- /content/illustratednotes/websecurity/web-security-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/websecurity/web-security-7.png -------------------------------------------------------------------------------- /content/illustratednotes/websecurity/web-security-final--small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/websecurity/web-security-final--small.png -------------------------------------------------------------------------------- /content/illustratednotes/wtf-rust/WTFRust_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/wtf-rust/WTFRust_1.png -------------------------------------------------------------------------------- /content/illustratednotes/wtf-rust/WTFRust_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/wtf-rust/WTFRust_2.png -------------------------------------------------------------------------------- /content/illustratednotes/wtf-rust/WTFRust_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/wtf-rust/WTFRust_3.png -------------------------------------------------------------------------------- /content/illustratednotes/wtf-rust/WTFRust_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/wtf-rust/WTFRust_4.png -------------------------------------------------------------------------------- /content/illustratednotes/wtf-rust/WTFRust_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/wtf-rust/WTFRust_5.png -------------------------------------------------------------------------------- /content/illustratednotes/wtf-rust/WTFRust_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/wtf-rust/WTFRust_6.png -------------------------------------------------------------------------------- /content/illustratednotes/wtf-rust/WTFisRust--small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/wtf-rust/WTFisRust--small.png -------------------------------------------------------------------------------- /content/illustratednotes/wtf-rust/stackoverflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/wtf-rust/stackoverflow.png -------------------------------------------------------------------------------- /content/illustratednotes/wtf-rust/thumb@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/content/illustratednotes/wtf-rust/thumb@2x.png -------------------------------------------------------------------------------- /content/static_content/about.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | --- 4 | 5 | # Illustrated.dev explains web development through illustration. 6 | 7 | Most of these explainers are about JavaScript fundamentals. Because those never go out of style. 8 | But I've also made a few on newer tools like React, Babel, and D3. 9 | 10 | I make these because the front-end world is overflowing with confounding things to learn (and JavaScript in particular is 🔥❗🍌🌟☠ ridiculous sometimes). 11 | 12 | Looking at the programming world through visual metaphors turns out to be a really effective learning tool. All the abstract jargon & syntax is much easier to understand when you can _see_ what's happening through diagrams and analogies. 13 | 14 | Not to mention it's a hell of a lot more interesting than slogging through some fat textbook. 15 | 16 | 17 | -------------------------------------------------------------------------------- /content/static_content/faqImages.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useStaticQuery, graphql } from 'gatsby' 3 | import Img from 'gatsby-image' 4 | 5 | const FAQDiagram = () => { 6 | const data = useStaticQuery(graphql` 7 | query FAQDiagramQuery { 8 | faqDiagram: file(relativePath: { eq: "illustratednotes-diagram.png" }) { 9 | childImageSharp { 10 | fluid(maxWidth: 600) { 11 | src 12 | } 13 | } 14 | } 15 | } 16 | `) 17 | 18 | 19 | return ( 20 | A line diagram showing sketchnotes on one end, and illustration on the other. Illustrated notes are in the middle. 25 | ) 26 | } 27 | 28 | export default FAQDiagram 29 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | const transitionDelay = 500 2 | 3 | exports.shouldUpdateScroll = ({ 4 | routerProps: { location }, 5 | getSavedScrollPosition, 6 | }) => { 7 | if (location.action === 'PUSH') { 8 | window.setTimeout(() => window.scrollTo(0, 0), transitionDelay) 9 | } else { 10 | const savedPosition = getSavedScrollPosition(location) 11 | window.setTimeout( 12 | () => window.scrollTo(...(savedPosition || [0, 0])), 13 | transitionDelay 14 | ) 15 | } 16 | return false 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Illustrated.dev", 3 | "description": "unknown", 4 | "version": "1.0.0", 5 | "author": "Maggie Appleton", 6 | "dependencies": { 7 | "@emotion/core": "^10.0.22", 8 | "@emotion/styled": "^10.0.23", 9 | "@mdx-js/mdx": "^1.5.1", 10 | "@mdx-js/react": "^1.5.1", 11 | "@reach/skip-nav": "^0.1.3", 12 | "@reach/visually-hidden": "^0.1.4", 13 | "@sindresorhus/slugify": "^0.9.1", 14 | "@tippy.js/react": "^3.1.1", 15 | "add": "^2.0.6", 16 | "d3": "^5.12.0", 17 | "formik": "^1.5.2", 18 | "gatsby": "^2.17.6", 19 | "gatsby-image": "^2.2.30", 20 | "gatsby-plugin-emotion": "^4.1.13", 21 | "gatsby-plugin-feed": "^2.3.19", 22 | "gatsby-plugin-google-analytics": "^2.1.23", 23 | "gatsby-plugin-layout": "^1.1.18", 24 | "gatsby-plugin-manifest": "^2.3.3", 25 | "gatsby-plugin-mdx": "^1.0.54", 26 | "gatsby-plugin-netlify": "^2.3.2", 27 | "gatsby-plugin-offline": "^2.0.20", 28 | "gatsby-plugin-printer": "^1.0.8", 29 | "gatsby-plugin-react-helmet": "^3.1.13", 30 | "gatsby-plugin-react-svg": "^2.1.2", 31 | "gatsby-plugin-sharp": "^2.5.4", 32 | "gatsby-plugin-web-font-loader": "^1.0.4", 33 | "gatsby-remark-images": "^3.1.28", 34 | "gatsby-source-filesystem": "^2.1.35", 35 | "gatsby-transformer-remark": "^2.6.32", 36 | "gatsby-transformer-sharp": "^2.4.4", 37 | "intersection-observer": "^0.6.0", 38 | "lodash": "^4.17.15", 39 | "mdx-utils": "^0.1.0", 40 | "polished": "^3.4.1", 41 | "prism-react-renderer": "^0.1.5", 42 | "process-env": "^1.1.0", 43 | "prop-types": "^15.6.2", 44 | "react": "^16.11.0", 45 | "react-dom": "^16.11.0", 46 | "react-ga": "^2.7.0", 47 | "react-helmet": "^5.2.1", 48 | "react-live": "^2.2.1", 49 | "react-lottie": "^1.2.3", 50 | "react-masonry-component": "^6.2.1", 51 | "react-responsive-embed": "^2.1.0", 52 | "react-scrollmagic": "^2.2.0", 53 | "react-share": "^2.4.0", 54 | "react-transition-group": "^4.3.0", 55 | "react-twitter-embed": "^2.0.8", 56 | "react-typography": "^0.16.18", 57 | "yarn": "^1.19.1", 58 | "yup": "^0.27.0" 59 | }, 60 | "keywords": [ 61 | "gatsby" 62 | ], 63 | "license": "MIT", 64 | "scripts": { 65 | "build": "gatsby build", 66 | "develop": "gatsby develop", 67 | "start": "npm run develop", 68 | "format": "prettier --write \"src/**/*.js\"", 69 | "test": "echo \"Error: no test specified\" && exit 1", 70 | "clean": "gatsby clean" 71 | }, 72 | "devDependencies": { 73 | "prettier": "^1.18.2" 74 | }, 75 | "repository": { 76 | "type": "git", 77 | "url": "https://github.com/eggheadio/how-to-egghead" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/components/DownloadSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import downloadicon from '../../../src/images/downloadicon.svg' 4 | 5 | // Inline downloads component for MDX posts 6 | 7 | // To make the component work, you have to put the image as an inline MDX component. Renders through {props.children}. 8 | // Leaving empty lines between the component tags and the inline image is also necessary 9 | 10 | const StyledDiv = css({ 11 | display: 'grid', 12 | gridTemplateColumns: '65% 35%', 13 | gridGap: '3em', 14 | textAlign: 'left', 15 | marginTop: '10vh', 16 | }) 17 | 18 | const StyledSubhead = css({ 19 | fontSize: '22px', 20 | fontWeight: '600', 21 | }) 22 | 23 | const StyledHR = css({ 24 | alignContent: 'left', 25 | margin: '0', 26 | width: '80px', 27 | border: '1px solid #3FCCDB', 28 | }) 29 | 30 | const StyledImg = css({ 31 | border: '1px solid #e8f3f7', 32 | boxSizing: 'border-box', 33 | borderRadius: '4px', 34 | boxShadow: '0px 8px 16px -12px rgba(120, 134, 138, 0.75)', 35 | }) 36 | 37 | const hoverEffect = css({ 38 | transform: 'translateY(3px)', 39 | color: '#7A44BB', 40 | }) 41 | 42 | const hoverDownload = css({ 43 | cursor: 'pointer', 44 | display: 'inline-flex', 45 | transition: 'all 0.4s ease-in-out', 46 | alignItems: 'center', 47 | marginTop: '16px', 48 | ':hover, :focus': hoverEffect, 49 | }) 50 | 51 | const DownloadSection = props => { 52 | return ( 53 |
54 |
{props.children}
55 |
56 |

{props.header}

57 |
58 |

{props.subheader}

59 | 60 |
61 | 62 |
67 | Download 68 |
69 |
70 | 71 |
72 |
73 | ) 74 | } 75 | 76 | export default DownloadSection 77 | -------------------------------------------------------------------------------- /src/components/animationRenderer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Lottie from 'react-lottie' 3 | 4 | export default function AnimationRenderer(props) { 5 | const [isPaused, setPaused] = React.useState(false) 6 | const defaultOptions = { 7 | loop: props.loop || true, 8 | autoplay: props.autoplay || true, 9 | animationData: props.animation, 10 | rendererSettings: { 11 | preserveAspectRatio: 'xMidYMid slice', 12 | }, 13 | } 14 | return props.animation ? ( 15 | <> 16 | 23 | 24 | ) : ( 25 | 'No animation data provided.' 26 | ) 27 | } 28 | 29 | // To use, export your lottie animation to a JSON file. In your post, add: 30 | // import AnimationRenderer from '../components/animationRenderer' 31 | // import CoolIntroAnimation from './coolIntroAnimation.json' 32 | -------------------------------------------------------------------------------- /src/components/bio.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import Img from 'gatsby-image' 4 | import { useStaticQuery, graphql } from 'gatsby' 5 | import { bpMinMD, bpMinSM, bpMinLG } from '../utils/breakpoints' 6 | import { MDXProvider } from '@mdx-js/react' 7 | import { MDXRenderer } from 'gatsby-plugin-mdx' 8 | import mdx from './mdx' 9 | 10 | const Bio = () => { 11 | const data = useStaticQuery(graphql` 12 | query BioPageQuery { 13 | profilePic: file(relativePath: { eq: "maggie.png" }) { 14 | childImageSharp { 15 | fluid(maxWidth: 330) { 16 | ...GatsbyImageSharpFluid 17 | } 18 | } 19 | } 20 | about: mdx(fields: { slug: { regex: "//about//" } }) { 21 | body 22 | } 23 | } 24 | `) 25 | return ( 26 |
36 |
37 | 45 |
64 |

Made by

65 |

Maggie Appleton

66 |
67 |
68 |
78 | 88 | {data.about.body} 89 | 90 |
91 |
92 | ) 93 | } 94 | export default Bio 95 | -------------------------------------------------------------------------------- /src/components/bullet.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/container.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import { bpMaxSM, bpMinMD } from '../utils/breakpoints' 4 | 5 | const Container = props => { 6 | const { 7 | maxWidth = 1160, 8 | noHorizontalPadding = false, 9 | noVerticalPadding = false, 10 | ...restProps 11 | } = props 12 | return ( 13 |
30 | {props.children} 31 |
32 | ) 33 | } 34 | 35 | export default Container 36 | -------------------------------------------------------------------------------- /src/components/downArrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Path 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/duotoneDark.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | // Duotone Dark 3 | // Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) 4 | // Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-evening-dark.css) 5 | // Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) 6 | 7 | /*:: import type { PrismTheme } from '../src/types' */ 8 | 9 | var theme /*: PrismTheme */ = { 10 | plain: { 11 | backgroundColor: '#2a2734', 12 | color: '#9a86fd', 13 | fontFamily: 'Operator SSm, Dank Mono, source-code-pro, monospace', 14 | fontSize: '1rem', 15 | }, 16 | styles: [ 17 | { 18 | types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'], 19 | style: { 20 | color: '#6c6783', 21 | }, 22 | }, 23 | { 24 | types: ['namespace'], 25 | style: { 26 | opacity: 0.7, 27 | }, 28 | }, 29 | { 30 | types: ['tag', 'operator', 'number'], 31 | style: { 32 | color: '#e09142', 33 | }, 34 | }, 35 | { 36 | types: ['property', 'function'], 37 | style: { 38 | color: '#9a86fd', 39 | }, 40 | }, 41 | { 42 | types: ['tag-id', 'selector', 'atrule-id'], 43 | style: { 44 | color: '#eeebff', 45 | }, 46 | }, 47 | { 48 | types: ['attr-name'], 49 | style: { 50 | color: '#c4b9fe', 51 | }, 52 | }, 53 | { 54 | types: [ 55 | 'boolean', 56 | 'string', 57 | 'entity', 58 | 'url', 59 | 'attr-value', 60 | 'keyword', 61 | 'control', 62 | 'directive', 63 | 'unit', 64 | 'statement', 65 | 'regex', 66 | 'at-rule', 67 | 'placeholder', 68 | 'variable', 69 | ], 70 | style: { 71 | color: '#ffcc99', 72 | }, 73 | }, 74 | { 75 | types: ['deleted'], 76 | style: { 77 | textDecorationLine: 'line-through', 78 | }, 79 | }, 80 | { 81 | types: ['inserted'], 82 | style: { 83 | textDecorationLine: 'underline', 84 | }, 85 | }, 86 | { 87 | types: ['italic'], 88 | style: { 89 | fontStyle: 'italic', 90 | }, 91 | }, 92 | { 93 | types: ['important', 'bold'], 94 | style: { 95 | fontWeight: 'bold', 96 | }, 97 | }, 98 | { 99 | types: ['important'], 100 | style: { 101 | color: '#c4b9fe', 102 | }, 103 | }, 104 | ], 105 | } 106 | 107 | module.exports = theme 108 | -------------------------------------------------------------------------------- /src/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import SignUp from './subscribe' 4 | import Container from './container' 5 | 6 | const Footer = ({ background = '#303745', noSubscribe, forwardedRef }) => ( 7 | 54 | ) 55 | 56 | export default Footer 57 | -------------------------------------------------------------------------------- /src/components/hamburger.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default () => ( 4 | 9 | 13 | 17 | 26 | 30 | 31 | ) 32 | -------------------------------------------------------------------------------- /src/components/image.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StaticQuery, graphql } from 'gatsby' 3 | import Img from 'gatsby-image' 4 | 5 | /* 6 | * This component is built using `gatsby-image` to automatically serve optimized 7 | * images with lazy loading and reduced file sizes. The image is loaded using a 8 | * `StaticQuery`, which allows us to load the image from directly within this 9 | * component, rather than having to pass the image data down from pages. 10 | * 11 | * For more information, see the docs: 12 | * - `gatsby-image`: https://gatsby.app/gatsby-image 13 | * - `StaticQuery`: https://gatsby.app/staticquery 14 | */ 15 | 16 | const Image = () => ( 17 | } 30 | /> 31 | ) 32 | export default Image 33 | -------------------------------------------------------------------------------- /src/components/link-tooltip-theme.css: -------------------------------------------------------------------------------- 1 | .tippy-tooltip.linktooltip-theme { 2 | color: #26323d; 3 | padding: 2px; 4 | font-size: 0.6em; 5 | box-shadow: 0 0 10px 4px rgba(154, 161, 177, 0.15), 6 | 0 4px 10px -8px rgba(36, 40, 47, 0.15), 7 | 0 4px 4px -2px rgba(91, 94, 105, 0.15); 8 | background-color: #fff; 9 | } 10 | .tippy-tooltip.linktooltip-theme[data-placement^='top'] > .tippy-arrow { 11 | border-width: 8px 8px 0; 12 | border-top-color: #fff; 13 | } 14 | .tippy-tooltip.linktooltip-theme[data-placement^='bottom'] > .tippy-arrow { 15 | border-width: 0 8px 8px; 16 | border-bottom-color: #fff; 17 | } 18 | .tippy-tooltip.linktooltip-theme[data-placement^='left'] > .tippy-arrow { 19 | border-width: 8px 0 8px 8px; 20 | border-left-color: #fff; 21 | } 22 | .tippy-tooltip.linktooltip-theme[data-placement^='right'] > .tippy-arrow { 23 | border-width: 8px 8px 8px 0; 24 | border-right-color: #fff; 25 | } 26 | .tippy-tooltip.linktooltip-theme > .tippy-backdrop { 27 | background-color: #fff; 28 | } 29 | .tippy-tooltip.linktooltip-theme > .tippy-svg-arrow { 30 | fill: #fff; 31 | } 32 | -------------------------------------------------------------------------------- /src/components/link.js: -------------------------------------------------------------------------------- 1 | import GatsbyLink from 'gatsby-link' 2 | import React, { forwardRef } from 'react' 3 | import { css } from '@emotion/core' 4 | import Tippy from '@tippy.js/react' 5 | import 'tippy.js/dist/tippy.css' 6 | import 'tippy.js/animations/shift-away.css' 7 | import './link-tooltip-theme.css' 8 | 9 | const LinkTooltip = forwardRef((props, ref) => { 10 | const noToolTip = props.noToolTip 11 | if (noToolTip === true) { 12 | return ( 13 |
18 | {props.children} 19 |
20 | ) 21 | } 22 | return ( 23 | 31 | 36 | {props.children} 37 | 38 | 39 | ) 40 | }) 41 | 42 | const Link = ({ noToolTip, children, to, ...other }) => { 43 | const internal = /^\/(?!\/)/.test(to) 44 | 45 | if (internal) { 46 | return ( 47 | 48 | {children} 49 | 50 | ) 51 | } 52 | 53 | return ( 54 | 55 | 56 | {children} 57 | 58 | 59 | ) 60 | } 61 | 62 | export default Link 63 | -------------------------------------------------------------------------------- /src/components/mdx/Blockquote.js: -------------------------------------------------------------------------------- 1 | import styled from '@emotion/styled' 2 | 3 | export default styled.blockquote` 4 | & > p { 5 | max-width: 90%; 6 | text-align: center; 7 | margin: 0.8em auto; 8 | font-size: 1.7em; 9 | line-height: 1.4em; 10 | font-family: 'brandon-grotesque'; 11 | } 12 | & ::before, 13 | & ::after { 14 | content: ''; 15 | display: block; 16 | margin: 0 auto; 17 | width: 3em; 18 | border-top: 2px solid rgba(0, 0, 0, 0.1); 19 | } 20 | padding: 0.8em 0em; 21 | ` 22 | -------------------------------------------------------------------------------- /src/components/mdx/BlogImage.js: -------------------------------------------------------------------------------- 1 | import styled from '@emotion/styled' 2 | 3 | export default styled.img` 4 | max-width: 100%; 5 | ` 6 | -------------------------------------------------------------------------------- /src/components/mdx/Center.js: -------------------------------------------------------------------------------- 1 | import styled from '@emotion/styled' 2 | 3 | const Center = styled.p` 4 | text-align: center; 5 | margin: 30px auto; 6 | ` 7 | export default Center 8 | -------------------------------------------------------------------------------- /src/components/mdx/Code.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import theme from '../duotoneDark' 4 | import Highlight, { defaultProps } from 'prism-react-renderer' 5 | import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live' 6 | 7 | const Code = ({ codeString, language, ...props }) => { 8 | if (props['react-live']) { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | } else { 17 | return ( 18 | 23 | {({ className, style, tokens, getLineProps, getTokenProps }) => ( 24 | 
25 |             {tokens.map((line, i) => (
26 |               

27 |                 
36 |                   {i + 1}
37 |                 
38 |                 {line.map((token, key) => (
39 |                   
40 |                 ))}
41 |               

42 |             ))}
43 |
44 | )} 45 | 46 | ) 47 | } 48 | } 49 | 50 | export default Code 51 | -------------------------------------------------------------------------------- /src/components/mdx/Divider.js: -------------------------------------------------------------------------------- 1 | import styled from '@emotion/styled' 2 | 3 | const Divider = styled.hr` 4 | text-align: center; 5 | max-width: 200px; 6 | margin: 60px auto; 7 | border: 1px solid #eec57c; 8 | ` 9 | export default Divider 10 | -------------------------------------------------------------------------------- /src/components/mdx/FullNote.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const FullNote = props => { 4 | return ( 5 | <> 6 |

7 | The Whole Illustrated Note 8 |

9 |
10 |
20 | {props.children} 21 |
22 |

28 | Want to learn more? 29 |

30 |

37 | A high-res & printable version of the notes, plus the full course is 38 | avaliable here on the{' '} 39 | 40 | {props.coursename} 41 | {' '} 42 | page. 43 |

44 | 45 | ) 46 | } 47 | 48 | export default FullNote 49 | -------------------------------------------------------------------------------- /src/components/mdx/ImageFrame.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | 4 | const ImageFrame = props => { 5 | return ( 6 |
15 | {props.children} 16 |
17 | ) 18 | } 19 | 20 | export default ImageFrame 21 | -------------------------------------------------------------------------------- /src/components/mdx/ImageGrid.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import { bpMinSM } from '../../utils/breakpoints' 4 | 5 | const ImageGrid = props => { 6 | return ( 7 | <> 8 |
21 | {props.children} 22 |
23 | 24 | ) 25 | } 26 | 27 | export default ImageGrid 28 | -------------------------------------------------------------------------------- /src/components/mdx/NotesContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | 4 | const NotesContainer = (props) => { 5 | return ( 6 |
11 | {props.children} 12 |
13 | ) 14 | } 15 | 16 | export default NotesContainer 17 | -------------------------------------------------------------------------------- /src/components/mdx/Paragraph.js: -------------------------------------------------------------------------------- 1 | import styled from '@emotion/styled' 2 | import { bpMinSM } from '../../utils/breakpoints' 3 | 4 | export default styled.p` 5 | text-align: left; 6 | ${bpMinSM} { 7 | line-height: 1.7; 8 | font-size: 22px; 9 | } 10 | line-height: 1.5; 11 | font-size: 20px; 12 | font-family: 'ff-tisa-web-pro', serif; 13 | ` 14 | -------------------------------------------------------------------------------- /src/components/mdx/ReadNext.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from '../link.js' 3 | import { css } from '@emotion/core' 4 | 5 | const ReadNext = props => { 6 | return ( 7 |
21 | 22 |

{props.title}

23 | 24 |

{props.subtitle}

25 |
26 | ) 27 | } 28 | 29 | export default ReadNext 30 | -------------------------------------------------------------------------------- /src/components/mdx/RefItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const RefItem = props => { 4 | return ( 5 | <> 6 |

{props.title}

7 |

{props.url}

8 |

{props.author}

9 | 10 | ) 11 | } 12 | 13 | export default RefItem 14 | -------------------------------------------------------------------------------- /src/components/mdx/RefsandReading.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const RefsAndReading = props => { 4 | return ( 5 |
6 |

Reference & Further Reading

7 | {props.children} 8 |
9 | ) 10 | } 11 | 12 | export default RefsAndReading 13 | -------------------------------------------------------------------------------- /src/components/mdx/SmallCenter.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import { bpMinMD } from '../../utils/breakpoints' 4 | 5 | const SmallCenter = (props) => { 6 | return ( 7 |
16 | {props.children} 17 |
18 | ) 19 | } 20 | 21 | export default SmallCenter 22 | -------------------------------------------------------------------------------- /src/components/mdx/Subheaders.js: -------------------------------------------------------------------------------- 1 | import styled from '@emotion/styled' 2 | 3 | const H2 = styled.h2` 4 | text-align: left; 5 | margin-top: 1.8em; 6 | margin-bottom: 20px; 7 | font-size: 2.1em; 8 | font-weight: 400; 9 | line-height: 1.1; 10 | font-family: 'freight-sans-pro', -apple-system, sans-serif; 11 | ` 12 | 13 | const H3 = styled.h3` 14 | font-size: 1.6em; 15 | color: #67768a; 16 | margin-top: 1.4em; 17 | ` 18 | 19 | const H4 = styled.h4` 20 | font-size: 1.3em; 21 | font-weight: bold; 22 | margin-top: 1.2em; 23 | margin-bottom: 0; 24 | ` 25 | 26 | const H5 = styled.h5` 27 | letter-spacing: 0.1em; 28 | text-transform: uppercase; 29 | ` 30 | const H6 = styled.h6`` 31 | 32 | export { H2, H3, H4, H5, H6 } 33 | -------------------------------------------------------------------------------- /src/components/mdx/TableofContents.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const TableOfContents = () => { 4 | return null 5 | } 6 | 7 | export default TableOfContents 8 | -------------------------------------------------------------------------------- /src/components/mdx/ThreeImageGrid.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import { bpMinSM } from '../../utils/breakpoints' 4 | 5 | const ThreeImageGrid = props => { 6 | return ( 7 | <> 8 |
23 | {props.children} 24 |
25 | 26 | ) 27 | } 28 | 29 | export default ThreeImageGrid 30 | -------------------------------------------------------------------------------- /src/components/mdx/Title.js: -------------------------------------------------------------------------------- 1 | import styled from '@emotion/styled' 2 | 3 | export default styled.h1` 4 | font-size: 2.4em; 5 | line-height: 1.25; 6 | margin-top: 20px; 7 | margin-bottom: 20px; 8 | padding-top: 30px; 9 | padding-bottom: 10px; 10 | ` 11 | -------------------------------------------------------------------------------- /src/components/mdx/Tooltip.js: -------------------------------------------------------------------------------- 1 | import React, { forwardRef } from 'react' 2 | import { css } from '@emotion/core' 3 | import Tippy from '@tippy.js/react' 4 | import 'tippy.js/dist/tippy.css' 5 | import 'tippy.js/animations/shift-away.css' 6 | import './tippy-light.css' 7 | 8 | const Tooltip = forwardRef((props, ref) => { 9 | return ( 10 | 18 |
33 | {props.children} 34 |
35 | 36 | ) 37 | }) 38 | 39 | export default Tooltip 40 | 41 | // To use in any MDX file, add 'import Tooltip from '../../../src/components/mdx/Tooltip.js' to the top. 42 | 43 | // Then add Hello anywhere in the body 44 | -------------------------------------------------------------------------------- /src/components/mdx/TwoCol.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import { bpMinMD } from '../../utils/breakpoints' 4 | 5 | const TwoCol = props => { 6 | return ( 7 |
17 | {props.children} 18 |
19 | ) 20 | } 21 | 22 | export default TwoCol 23 | -------------------------------------------------------------------------------- /src/components/mdx/VerticalSketchnote.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const VerticalSketchnote = props => { 4 | return ( 5 | <> 6 |

7 | The Whole Illustrated Note 8 |

9 |
10 |
19 | {props.children} 20 |
21 |

27 | Want to learn more? 28 |

29 |

36 | A high-res & printable version of the illustrated note, plus the full 37 | course is avaliable here on the{' '} 38 | 39 | {props.coursename} 40 | {' '} 41 | page. 42 |

43 | 44 | ) 45 | } 46 | 47 | export default VerticalSketchnote 48 | -------------------------------------------------------------------------------- /src/components/mdx/egghead-course-card.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | 4 | const EggheadCourseCard = props => { 5 | return ( 6 | 7 |
33 | {props.title} 34 |

{props.title}

35 |
36 | 37 | ) 38 | } 39 | 40 | export default EggheadCourseCard 41 | -------------------------------------------------------------------------------- /src/components/mdx/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Title from './Title' 3 | import Paragraph from './Paragraph' 4 | import Blockquote from './Blockquote' 5 | import Code from './Code' 6 | import BlogImage from './BlogImage' 7 | import ImageFrame from './ImageFrame' 8 | import ImageGrid from './ImageGrid' 9 | import Divider from './Divider' 10 | import { H2, H3, H4, H5, H6 } from './Subheaders' 11 | import { preToCodeBlock } from 'mdx-utils' 12 | import Center from './Center' 13 | import Tooltip from './Tooltip' 14 | import TwoCol from './TwoCol' 15 | import Link from '../link' 16 | import NotesContainer from './NotesContainer' 17 | import FullNote from './FullNote' 18 | import SmallCenter from './SmallCenter' 19 | import ReadNext from './ReadNext' 20 | 21 | export default { 22 | h1: props => , 23 | h2: props => <H2 {...props} />, 24 | h3: props => <H3 {...props} />, 25 | h4: props => <H4 {...props} />, 26 | h5: props => <H5 {...props} />, 27 | h6: props => <H6 {...props} />, 28 | p: props => <Paragraph {...props} />, 29 | blockquote: props => <Blockquote {...props} />, 30 | img: props => <BlogImage {...props} />, 31 | ImageGrid: props => <ImageGrid {...props} />, 32 | ImageFrame: props => <ImageFrame {...props} />, 33 | hr: props => <Divider {...props} />, 34 | Center: props => <Center {...props} />, 35 | Tooltip: props => <Tooltip {...props} />, 36 | Link: props => <Link {...props} />, 37 | TwoCol: props => <TwoCol {...props} />, 38 | SmallCenter: props => <SmallCenter {...props} />, 39 | NotesContainer: props => <NotesContainer {...props} />, 40 | ReadNext: props => <ReadNext {...props} />, 41 | FullNote: props => <FullNote {...props} />, 42 | pre: preProps => { 43 | const props = preToCodeBlock(preProps) 44 | // if there's a codeString and some props, we passed the test 45 | if (props) { 46 | return <Code {...props} /> 47 | } else { 48 | // it's possible to have a pre without a code in it 49 | return <pre {...preProps} /> 50 | } 51 | }, 52 | } 53 | -------------------------------------------------------------------------------- /src/components/mdx/tippy-light.css: -------------------------------------------------------------------------------- 1 | .tippy-tooltip.tippylight-theme { 2 | color: #26323d; 3 | padding: 8px; 4 | font-size: 0.8em; 5 | box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 6 | 0 4px 20px -8px rgba(36, 40, 47, 0.25), 7 | 0 4px 4px -2px rgba(91, 94, 105, 0.15); 8 | background-color: #fff; 9 | } 10 | .tippy-tooltip.light-theme[data-placement^='top'] > .tippy-arrow { 11 | border-width: 8px 8px 0; 12 | border-top-color: #fff; 13 | } 14 | .tippy-tooltip.light-theme[data-placement^='bottom'] > .tippy-arrow { 15 | border-width: 0 8px 8px; 16 | border-bottom-color: #fff; 17 | } 18 | .tippy-tooltip.light-theme[data-placement^='left'] > .tippy-arrow { 19 | border-width: 8px 0 8px 8px; 20 | border-left-color: #fff; 21 | } 22 | .tippy-tooltip.light-theme[data-placement^='right'] > .tippy-arrow { 23 | border-width: 8px 8px 8px 0; 24 | border-right-color: #fff; 25 | } 26 | .tippy-tooltip.light-theme > .tippy-backdrop { 27 | background-color: #fff; 28 | } 29 | .tippy-tooltip.light-theme > .tippy-svg-arrow { 30 | fill: #fff; 31 | } 32 | -------------------------------------------------------------------------------- /src/components/recCoursesCard.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { css } from '@emotion/core' 3 | import Link from './link' 4 | import downArrow from './downArrow.svg' 5 | // import { CSSTransition, TransitionGroup } from 'react-transition-group' 6 | 7 | function RecCourses(props) { 8 | const [isDowndownOpen, setDropdown] = useState(false) 9 | 10 | const toggleDropdown = () => { 11 | isDowndownOpen ? setDropdown(false) : setDropdown(true) 12 | } 13 | 14 | 15 | return ( 16 | <div 17 | css={css({ 18 | hr: { 19 | margin: '18px 0 10px', 20 | maxWidth: '100%', 21 | border: '0.5px solid #BECCD6', 22 | }, 23 | button: { 24 | margin: '0', 25 | display: 'inline-block', 26 | background: 'none', 27 | paddingRight: '10px', 28 | }, 29 | })}> 30 | <hr /> 31 | <button 32 | aria-label='Click to view recommended courses' 33 | onClick={toggleDropdown}> 34 | <img alt='down arrow' src={downArrow} /> 35 | <h5 36 | css={css({ 37 | display: 'inline-block', 38 | fontSize: '0.9em', 39 | margin: '0', 40 | paddingLeft: '6px', 41 | })}> 42 | Recommended Courses 43 | </h5> 44 | </button> 45 | 46 | {isDowndownOpen 47 | ? props.props.map((rc, index) => ( 48 | <div 49 | css={css({ 50 | margin: '6px 0', 51 | p: { 52 | fontSize: '0.92em', 53 | margin: '0', 54 | display: 'inline-flex', 55 | paddingRight: '4px', 56 | }, 57 | h5: { 58 | display: 'inline-flex', 59 | fontSize: '0.8em', 60 | textTransform: 'none', 61 | letterSpacing: '0', 62 | margin: '0', 63 | }, 64 | })} 65 | key={index}> 66 | <Link noToolTip={true} to={rc.url}> 67 | <p>{rc.title}</p> 68 | </Link> 69 | <h5>by {rc.instructor}</h5> 70 | </div> 71 | )) 72 | : null} 73 | </div> 74 | ) 75 | } 76 | 77 | export default RecCourses 78 | -------------------------------------------------------------------------------- /src/components/resourceBook.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | // import Img from 'gatsby-image' 4 | // import { StaticQuery, graphql } from 'gatsby' 5 | import { bpMinSM } from '../utils/breakpoints' 6 | import Link from './link' 7 | 8 | export default function ResourceBook(props) { 9 | return ( 10 | <> 11 | <Link noToolTip={true} to={props.url}> 12 | <div 13 | css={css({ 14 | // justifyContent: 'space-between', 15 | '.gatsby-image-wrapper': { 16 | width: '100%', 17 | height: '100%', 18 | }, 19 | ':hover': { 20 | img: { 21 | boxShadow: '0 10px 30px -10px rgba(0,0,20,0.25)', 22 | transition: 'all 350ms ease', 23 | }, 24 | }, 25 | transition: 'all 350ms ease', 26 | })}> 27 | <div 28 | css={css({ 29 | [bpMinSM]: { 30 | padding: '20px', 31 | }, 32 | padding: '8px', 33 | color: '#464E55', 34 | // justifyContent: 'space-between', 35 | display: 'grid', 36 | gridTemplateColumns: '1fr 2fr', 37 | alignSelf: 'start', 38 | h1: { 39 | fontSize: '1.5em', 40 | marginBottom: '16px', 41 | lineHeight: '1.2em', 42 | }, 43 | h5: { 44 | fontSize: '0.9em', 45 | textTransform: 'uppercase', 46 | letterSpacing: '0.1em', 47 | lineHeight: '1.3em', 48 | }, 49 | img: { 50 | maxWidth: '100%', 51 | borderRadius: '4px', 52 | }, 53 | '.dataBlock': { 54 | paddingLeft: '20px', 55 | alignSelf: 'center', 56 | }, 57 | '.description': { 58 | lineHeight: '1.4em', 59 | fontSize: '1em', 60 | maxWidth: '450px', 61 | }, 62 | ':hover': { 63 | transition: 'all 1s ease-in', 64 | h1: { color: '#8748C7' }, 65 | }, 66 | })}> 67 | <img 68 | css={css({ 69 | padding: '10px', 70 | maxWidth: props.large ? '250px' : '150px', 71 | maxHeight: props.large ? '300px' : '200px', 72 | alignSelf: 'center', 73 | justifySelf: 'center', 74 | borderRadius: '3px', 75 | transition: 'all 350ms ease', 76 | background: 'white', 77 | boxShadow: '0px 1px 2px rgba(52, 61, 68, 0.2)', 78 | })} 79 | alt='book cover' 80 | src={props.img} 81 | /> 82 | <div class='dataBlock'> 83 | <h1>{props.title}</h1> 84 | <h5>{props.author}</h5> 85 | <p class='description'>{props.description}</p> 86 | </div> 87 | </div> 88 | </div> 89 | </Link> 90 | </> 91 | ) 92 | } 93 | -------------------------------------------------------------------------------- /src/components/resourceCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import { bpMinSM } from '../utils/breakpoints' 4 | import Link from './link' 5 | import RecCourses from './recCoursesCard' 6 | 7 | export default function ResourceCard(props) { 8 | // console.log('props', props) 9 | return ( 10 | <> 11 | <div 12 | css={css({ 13 | margin: '10px', 14 | alignSelf: 'start', 15 | borderRadius: '6px', 16 | background: 'rgba(253,252,252,1)', 17 | border: '1px solid rgba(255,255,255,0.7)', 18 | boxShadow: '5px 5px 20px 0 rgba(218,224,228,0.8)', 19 | justifyContent: 'space-between', 20 | '.gatsby-image-wrapper': { 21 | width: '100%', 22 | height: '100%', 23 | }, 24 | ':hover': { 25 | boxShadow: '0px 2px 2px 0 rgba(190,198,206,0.9)', 26 | transition: 'all 0.4s ease', 27 | transform: 'scale(0.99)', 28 | border: '1px solid rgba(218,224,228,1)', 29 | }, 30 | transition: 'all 0.4s ease', 31 | })}> 32 | <div 33 | css={css({ 34 | justifyContent: 'space-between', 35 | color: '#464E55', 36 | transition: 'all 1s ease', 37 | '.dataBlock': { 38 | [bpMinSM]: { padding: '25px' }, 39 | padding: '10px', 40 | }, 41 | h1: { 42 | fontSize: '1.6em', 43 | }, 44 | h5: { 45 | textAlign: 'right', 46 | fontSize: '0.9em', 47 | letterSpacing: '0.1em', 48 | lineHeight: '1.3em', 49 | }, 50 | img: { 51 | height: 'auto', 52 | maxWidth: '100%', 53 | borderRadius: '6px 6px 0 0 ', 54 | // [bpMinMD]: { width: '200%' }, 55 | }, 56 | '.description': { 57 | lineHeight: '1.3em', 58 | fontSize: '1em', 59 | }, 60 | ':hover': { 61 | h1: { 62 | color: '#8748C7', 63 | }, 64 | }, 65 | })}> 66 | <Link noToolTip={true} to={props.url}> 67 | <img alt={props.title} src={props.img} /> 68 | </Link> 69 | 70 | <div class='dataBlock'> 71 | <Link noToolTip={true} to={props.url}> 72 | <h1>{props.title}</h1> 73 | </Link> 74 | 75 | <p class='description'>{props.description}</p> 76 | <h5>{props.cost}</h5> 77 | 78 | {props.recCourses && <RecCourses props={props.recCourses} />} 79 | </div> 80 | </div> 81 | </div> 82 | </> 83 | ) 84 | } 85 | -------------------------------------------------------------------------------- /src/components/seo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Helmet from 'react-helmet' 4 | import { StaticQuery, graphql } from 'gatsby' 5 | 6 | function SEO({ description, lang, meta, keywords, title, image }) { 7 | return ( 8 | <StaticQuery 9 | query={detailsQuery} 10 | render={data => { 11 | const metaImage = 'https://illustrated.dev/images/id_opengraph.png' 12 | const metaDescription = 13 | description || data.site.siteMetadata.description 14 | return ( 15 | <Helmet 16 | htmlAttributes={{ 17 | lang 18 | }} 19 | title={title} 20 | titleTemplate={data.site.siteMetadata.title} 21 | meta={[ 22 | { 23 | name: 'description', 24 | content: metaDescription 25 | }, 26 | { 27 | property: 'og:title', 28 | content: title 29 | }, 30 | { 31 | property: 'og:description', 32 | content: metaDescription 33 | }, 34 | { 35 | property: 'og:type', 36 | content: 'website' 37 | }, 38 | { 39 | name: 'twitter:card', 40 | content: 'summary_large_image' 41 | }, 42 | { 43 | name: 'twitter:creator', 44 | content: data.site.siteMetadata.author 45 | }, 46 | { 47 | name: 'twitter:site', 48 | content: '@mappletons' 49 | }, 50 | { 51 | name: 'twitter:title', 52 | content: title 53 | }, 54 | { 55 | name: 'twitter:description', 56 | content: metaDescription 57 | }, 58 | { 59 | name: 'twitter:image', 60 | content: image 61 | }, 62 | { 63 | name: 'image', 64 | content: image 65 | }, 66 | { 67 | name: 'og:image', 68 | content: image 69 | } 70 | ] 71 | .concat( 72 | keywords.length > 0 73 | ? { 74 | name: 'keywords', 75 | content: keywords.join(', ') 76 | } 77 | : [] 78 | ) 79 | .concat(meta)} 80 | /> 81 | ) 82 | }} 83 | /> 84 | ) 85 | } 86 | 87 | SEO.defaultProps = { 88 | lang: 'en', 89 | meta: [], 90 | keywords: [] 91 | } 92 | 93 | SEO.propTypes = { 94 | description: PropTypes.string, 95 | lang: PropTypes.string, 96 | meta: PropTypes.array, 97 | keywords: PropTypes.arrayOf(PropTypes.string), 98 | title: PropTypes.string.isRequired 99 | } 100 | 101 | export default SEO 102 | 103 | const detailsQuery = graphql` 104 | query DefaultSEOQuery { 105 | site { 106 | siteMetadata { 107 | title 108 | description 109 | author 110 | image 111 | } 112 | } 113 | } 114 | ` 115 | -------------------------------------------------------------------------------- /src/components/share.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import twitterIcon from '../images/twitter.svg' 4 | import emailIcon from '../images/emailicon.svg' 5 | import { css } from '@emotion/core' 6 | import { TwitterShareButton, EmailShareButton } from 'react-share' 7 | 8 | const ShareButton = css({ 9 | width: '40px', 10 | height: '40px', 11 | cursor: 'pointer', 12 | margin: '0 5px', 13 | }) 14 | 15 | const Share = ({ socialConfig, tags }) => ( 16 | <div 17 | css={css({ 18 | width: '100%', 19 | marginTop: '80px', 20 | display: 'flex', 21 | alignItems: 'center', 22 | justifyContent: 'center', 23 | img: { 24 | margin: 0, 25 | }, 26 | })}> 27 | <TwitterShareButton 28 | css={ShareButton} 29 | url={socialConfig.config.url} 30 | title={socialConfig.config.title} 31 | via={socialConfig.twitterHandle.split('@').join('')}> 32 | <img src={twitterIcon} width='100%' alt='Twitter' /> 33 | </TwitterShareButton> 34 | {/* {socialConfig.config.media && ( 35 | <PinterestShareButton 36 | css={ShareButton} 37 | media={socialConfig.config.media} 38 | url={socialConfig.config.url} 39 | title={socialConfig.config.title}> 40 | <img src={pinterestIcon} width="100%" alt="Pinterest" /> 41 | </PinterestShareButton> 42 | )} */} 43 | <EmailShareButton 44 | css={ShareButton} 45 | url={socialConfig.config.url} 46 | title={socialConfig.config.title} 47 | subject={socialConfig.config.title} 48 | body={`Check out ${socialConfig.config.url}`}> 49 | <img src={emailIcon} width='100%' alt='email' /> 50 | </EmailShareButton> 51 | </div> 52 | ) 53 | 54 | Share.propTypes = { 55 | socialConfig: PropTypes.shape({ 56 | twitterHandle: PropTypes.string.isRequired, 57 | config: PropTypes.shape({ 58 | url: PropTypes.string.isRequired, 59 | title: PropTypes.string.isRequired, 60 | media: PropTypes.string.isRequired, 61 | }), 62 | }).isRequired, 63 | tags: PropTypes.arrayOf(PropTypes.string), 64 | } 65 | Share.defaultProps = { 66 | tags: [], 67 | } 68 | 69 | export default Share 70 | -------------------------------------------------------------------------------- /src/components/subbutton.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '@emotion/core' 3 | import { bpMinSM } from '../utils/breakpoints' 4 | 5 | class Subbutton extends React.Component { 6 | render() { 7 | return ( 8 | <button 9 | css={css({ 10 | display: 'none', 11 | [bpMinSM]: { 12 | display: 'block', 13 | fontFamily: 'brandon-grotesque, sans-serif', 14 | fontSize: '14px', 15 | letterSpacing: '0.1em', 16 | fontWeight: '700', 17 | textTransform: 'uppercase', 18 | boxSizing: 'border-box', 19 | borderRadius: '4px', 20 | background: ['#7A44BB', 'linear-gradient(#974DD6, #7A44BB)'], 21 | border: 0, 22 | color: '#fff', 23 | padding: '10px 15px', 24 | cursor: 'pointer', 25 | transition: 'background 250ms', 26 | ':hover': { 27 | background: ['#974DD6', 'linear-gradient(#B063DD, #7A44BB)'], 28 | transition: 'background 250ms', 29 | }, 30 | }, 31 | })} 32 | onClick={this.props.onClick}> 33 | Subscribe 34 | </button> 35 | ) 36 | } 37 | } 38 | 39 | export default Subbutton 40 | -------------------------------------------------------------------------------- /src/components/transition.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | TransitionGroup, 4 | Transition as ReactTransition, 5 | } from 'react-transition-group' 6 | 7 | const timeout = 500 8 | const getTransitionStyles = { 9 | entering: { 10 | position: 'absolute', 11 | opacity: 0, 12 | }, 13 | entered: { 14 | transition: `opacity ${timeout}ms ease-in-out`, 15 | opacity: 1, 16 | }, 17 | exiting: { 18 | transition: `all ${timeout}ms ease-in-out`, 19 | opacity: 0, 20 | }, 21 | } 22 | 23 | class Transition extends React.PureComponent { 24 | render() { 25 | const { children, location } = this.props 26 | 27 | return ( 28 | <TransitionGroup> 29 | <ReactTransition 30 | key={location.pathname} 31 | timeout={{ 32 | enter: timeout, 33 | exit: timeout, 34 | }}> 35 | {status => ( 36 | <div 37 | style={{ 38 | ...getTransitionStyles[status], 39 | }}> 40 | {children} 41 | </div> 42 | )} 43 | </ReactTransition> 44 | </TransitionGroup> 45 | ) 46 | } 47 | } 48 | 49 | export default Transition 50 | -------------------------------------------------------------------------------- /src/images/downloadicon.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="none" viewBox="0 0 44 44"> 2 | <circle cx="22" cy="22" r="22" fill="#3FCCDB"/> 3 | <path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M13 26V29C13 30.1046 13.8954 31 15 31H29C30.1046 31 31 30.1046 31 29V26"/> 4 | <path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M16 19L22 25L28 19"/> 5 | <path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M22 11V25"/> 6 | </svg> 7 | -------------------------------------------------------------------------------- /src/images/emailicon.svg: -------------------------------------------------------------------------------- 1 | <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <circle cx="19" cy="19" r="19" fill="#EAF2F4"/> 3 | <rect x="9" y="12" width="20" height="15.0549" rx="2" stroke="#53737D" stroke-width="2"/> 4 | <path d="M10 12.8892L17.552 20.8156C18.3401 21.6428 19.6599 21.6428 20.448 20.8156L28 12.8892" stroke="#53737D" stroke-width="2"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /src/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/src/images/favicon.ico -------------------------------------------------------------------------------- /src/images/id_favicon.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.94 15.71"><defs><style>.cls-1{fill:#39c4d4;}.cls-2{fill:#474e5c;}</style></defs><title>id_favicon -------------------------------------------------------------------------------- /src/images/maggie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eggheadio/illustrated-dev/b9e844fd6ccf4cc32624828cdb54b0d1dadd1c89/src/images/maggie.png -------------------------------------------------------------------------------- /src/images/pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/images/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/layouts/layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { findDOMNode } from 'react-dom' 3 | import { Global, css } from '@emotion/core' 4 | import reset from '../utils/reset' 5 | import './layout-styles.css' 6 | import Header from '../components/header' 7 | import Footer from '../components/footer' 8 | import { SkipNavLink, SkipNavContent } from '@reach/skip-nav' 9 | import '@reach/skip-nav/styles.css' 10 | import Transition from '../components/transition' 11 | 12 | export const globalStyles = css({ 13 | ...reset, 14 | }) 15 | 16 | const Layout = ({ 17 | location, 18 | children, 19 | background = 'transparent', 20 | noSubscribe, 21 | }) => { 22 | const footerRef = React.useRef(null) 23 | 24 | const scrollToFooter = () => { 25 | if (footerRef && footerRef.current) { 26 | const footer = findDOMNode(footerRef.current) 27 | footer.scrollIntoView() 28 | } 29 | } 30 | return ( 31 | <> 32 | 33 | 34 |
35 | 36 | 37 |
41 | {children} 42 |
43 | 44 | 45 |