├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── package.json ├── src ├── components │ ├── EpisodeBlock.js │ ├── HomeBackground.js │ ├── HomeHeader.js │ ├── PageHeader.js │ ├── TeamMemberBlock.js │ ├── episode.css │ ├── footer.css │ ├── footer.js │ ├── header.css │ ├── homeBackground.css │ ├── image.js │ ├── player.js │ └── seo.js ├── data │ └── bios.js ├── episodes │ ├── 2019-07-01-new-career-who-dis │ │ └── index.md │ ├── 2019-07-08-side-project-balancing-act │ │ └── index.md │ ├── 2019-07-15-blogging-101 │ │ └── index.md │ ├── 2019-07-22-web-technologies-were-excited-about │ │ └── index.md │ ├── 2019-07-29-how-the-ladybugs-got-their-spots │ │ └── index.md │ ├── 2019-08-05-impostor-syndrome │ │ └── index.md │ ├── 2019-08-12-css-part-1 │ │ └── index.md │ ├── 2019-08-14-css-part-2 │ │ └── index.md │ ├── 2019-08-19-ask-kelly-about-entrepreneurship │ │ └── index.md │ ├── 2019-08-26-career-paths-in-tech │ │ └── index.md │ ├── 2019-09-16-what-the-heck-is-graphql │ │ └── index.md │ ├── 2019-09-23-teaching-code │ │ └── index.md │ ├── 2019-09-30-design-systems │ │ └── index.md │ ├── 2019-10-07-hacktoberfest-part-1 │ │ └── index.md │ ├── 2019-10-10-hacktoberfest-part-2 │ │ └── index.md │ ├── 2019-10-13-javascript-frameworks │ │ └── index.md │ ├── 2019-10-21-technical-portfolios │ │ └── index.md │ ├── 2019-10-28-shopify-and-e-commerce │ │ └── index.md │ ├── 2019-11-04-working-remotely │ │ └── index.md │ ├── 2019-11-11-debugging │ │ └── index.md │ ├── 2019-11-18-web-performance │ │ └── index.md │ └── 2019-11-25-conference-talks │ │ └── index.md ├── images │ ├── books │ │ ├── habits.jpg │ │ ├── invisible-women.jpg │ │ └── it-doesnt-have-to-be-crazy-at-work.jpg │ ├── brand │ │ ├── background.svg │ │ ├── episode-header-background.svg │ │ ├── ladybug.svg │ │ ├── ladybug@2x.png │ │ ├── light-logo.svg │ │ ├── logo-white.svg │ │ ├── logo.svg │ │ ├── logo@2x.png │ │ └── page-header-background.svg │ ├── footer │ │ ├── google.svg │ │ ├── itunes.svg │ │ ├── podcast.svg │ │ ├── rss.svg │ │ ├── spotify.svg │ │ └── twitter.svg │ ├── nav │ │ ├── close.svg │ │ ├── menu-red.svg │ │ └── menu-white.svg │ ├── player │ │ ├── pause-button.svg │ │ ├── play-button-red.svg │ │ └── play-button.svg │ ├── sponsors │ │ ├── RC_logo.svg │ │ ├── digitalocean.svg │ │ ├── jamstack.svg │ │ ├── logrocket.svg │ │ ├── netlify.svg │ │ ├── sanity.svg │ │ └── shopify.svg │ └── team │ │ ├── ali.jpg │ │ ├── emma.jpg │ │ └── kelly.jpg ├── pages │ ├── 404.js │ ├── about.js │ ├── books.js │ ├── contact.js │ ├── episodes.js │ ├── index.js │ └── pages.css ├── templates │ └── episode.js └── transcripts │ ├── 01-new-career-who-dis.md │ ├── 02-side-project-balancing-act.md │ ├── 03-blogging-101.md │ ├── 04-web-technologies-were-excited-about.md │ ├── 05-how-the-ladybugs-got-their-spots.md │ ├── 06-impostor-syndrome.md │ ├── 07-css-part-1.md │ ├── 08-css-part-2.md │ ├── 09-ask-kelly-about-entrepreneurship.md │ ├── 10-career-paths-in-tech.md │ ├── 11-what-the-heck-is-graphql.md │ ├── 12-teaching-code.md │ ├── 13-design-systems.md │ ├── 14-hacktoberfest-part-1.md │ ├── 15-hacktoberfest-part-2.md │ ├── 16-javascript-frameworks.md │ ├── 17-technical-portfolios.md │ ├── 18-shopify-and-e-commerce.md │ ├── 19-working-remotely.md │ ├── 20-debugging.md │ ├── 21-web-performance.md │ └── 22-conferences.md └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | #VS Code 72 | .vscode/ 73 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /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 | 2 |

3 | 4 | Gatsby 5 | 6 |

7 |

8 | Gatsby's default starter 9 |

10 | 11 | Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. 12 | 13 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._ 14 | 15 | ## 🚀 Quick start 16 | 17 | 1. **Create a Gatsby site.** 18 | 19 | Use the Gatsby CLI to create a new site, specifying the default starter. 20 | 21 | ```shell 22 | # create a new Gatsby site using the default starter 23 | gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default 24 | ``` 25 | 26 | 1. **Start developing.** 27 | 28 | Navigate into your new site’s directory and start it up. 29 | 30 | ```shell 31 | cd my-default-starter/ 32 | gatsby develop 33 | ``` 34 | 35 | 1. **Open the source code and start editing!** 36 | 37 | Your site is now running at `http://localhost:8000`! 38 | 39 | _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ 40 | 41 | Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 42 | 43 | ## 🧐 What's inside? 44 | 45 | A quick look at the top-level files and directories you'll see in a Gatsby project. 46 | 47 | . 48 | ├── node_modules 49 | ├── src 50 | ├── .gitignore 51 | ├── .prettierrc 52 | ├── gatsby-browser.js 53 | ├── gatsby-config.js 54 | ├── gatsby-node.js 55 | ├── gatsby-ssr.js 56 | ├── LICENSE 57 | ├── package-lock.json 58 | ├── package.json 59 | └── README.md 60 | 61 | 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 62 | 63 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. 64 | 65 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 66 | 67 | 4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 68 | 69 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 70 | 71 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). 72 | 73 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 74 | 75 | 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 76 | 77 | 9. **`LICENSE`**: Gatsby is licensed under the MIT license. 78 | 79 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** 80 | 81 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 82 | 83 | 12. **`README.md`**: A text file containing useful reference information about your project. 84 | 85 | ## 🎓 Learning Gatsby 86 | 87 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: 88 | 89 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. 90 | 91 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. 92 | 93 | ## 💫 Deploy 94 | 95 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default) 96 | 97 | 98 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Browser APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/browser-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | const path = require(`path`) 2 | 3 | module.exports = { 4 | siteMetadata: { 5 | title: `Ladybug Podcast`, 6 | description: `Emma Bostian, Kelly Vaughn, and Ali Spittel talk career and code.`, 7 | author: `@emmabostian`, 8 | }, 9 | plugins: [ 10 | `gatsby-plugin-react-helmet`, 11 | { 12 | resolve: `gatsby-source-filesystem`, 13 | options: { 14 | name: `images`, 15 | path: `${__dirname}/src/images`, 16 | }, 17 | }, 18 | { 19 | resolve: "gatsby-source-filesystem", 20 | options: { 21 | path: `${__dirname}/src/episodes`, 22 | name: "episodes", 23 | }, 24 | }, 25 | { 26 | resolve: `gatsby-plugin-google-fonts`, 27 | options: { 28 | fonts: [`Montserrat`], 29 | }, 30 | }, 31 | `gatsby-transformer-sharp`, 32 | "gatsby-transformer-remark", 33 | `gatsby-plugin-sharp`, 34 | { 35 | resolve: `gatsby-transformer-remark`, 36 | options: { 37 | plugins: [ 38 | { 39 | resolve: `gatsby-remark-relative-images`, 40 | }, 41 | { 42 | resolve: `gatsby-remark-images`, 43 | options: { 44 | maxWidth: 590, 45 | linkImagesToOriginal: false, 46 | }, 47 | }, 48 | { 49 | resolve: `gatsby-remark-responsive-iframe`, 50 | options: { 51 | wrapperStyle: `margin-bottom: 1.0725rem`, 52 | }, 53 | }, 54 | `gatsby-remark-copy-linked-files`, 55 | `gatsby-remark-smartypants`, 56 | ], 57 | }, 58 | }, 59 | { 60 | resolve: `gatsby-plugin-manifest`, 61 | options: { 62 | name: `gatsby-starter-default`, 63 | short_name: `starter`, 64 | start_url: `/`, 65 | background_color: `#663399`, 66 | theme_color: `#663399`, 67 | display: `minimal-ui`, 68 | icon: `src/images/brand/ladybug@2x.png`, // This path is relative to the root of the site. 69 | }, 70 | }, 71 | `gatsby-plugin-sharp`, 72 | `gatsby-transformer-sharp`, 73 | { 74 | resolve: `gatsby-source-filesystem`, 75 | options: { 76 | name: `images`, 77 | path: path.join(__dirname, `src`, `images/books`), 78 | }, 79 | }, 80 | { 81 | resolve: `gatsby-source-filesystem`, 82 | options: { 83 | name: `images`, 84 | path: path.join(__dirname, `src`, `images/team`), 85 | }, 86 | }, 87 | // this (optional) plugin enables Progressive Web App + Offline functionality 88 | // To learn more, visit: https://gatsby.dev/offline 89 | // `gatsby-plugin-offline`, 90 | ], 91 | } 92 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require("path") 2 | 3 | exports.createPages = ({ boundActionCreators, graphql }) => { 4 | const { createPage } = boundActionCreators 5 | 6 | const episodeTemplate = path.resolve("src/templates/episode.js") 7 | 8 | return graphql(` 9 | { 10 | allMarkdownRemark { 11 | edges { 12 | node { 13 | frontmatter { 14 | path 15 | } 16 | } 17 | } 18 | } 19 | } 20 | `).then(res => { 21 | if (res.errors) { 22 | return Promise.reject(res.errors) 23 | } 24 | 25 | res.data.allMarkdownRemark.edges.forEach(({ node }) => { 26 | createPage({ 27 | path: node.frontmatter.path, 28 | component: episodeTemplate, 29 | }) 30 | }) 31 | }) 32 | } 33 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ladybug-podcast", 3 | "private": true, 4 | "description": "Emma Bostian, Kelly Vaughn, and Ali Spittel talk career and code.", 5 | "version": "0.1.0", 6 | "author": "Emma Bostian", 7 | "dependencies": { 8 | "gatsby": "^2.18.12", 9 | "gatsby-image": "^2.2.34", 10 | "gatsby-plugin-google-fonts": "^1.0.1", 11 | "gatsby-plugin-manifest": "^2.2.31", 12 | "gatsby-plugin-offline": "^3.0.27", 13 | "gatsby-plugin-react-helmet": "^3.1.16", 14 | "gatsby-plugin-sharp": "^2.3.10", 15 | "gatsby-remark-copy-linked-files": "^2.1.33", 16 | "gatsby-remark-images": "^3.1.39", 17 | "gatsby-remark-prismjs": "^3.3.28", 18 | "gatsby-remark-relative-images": "^0.2.3", 19 | "gatsby-remark-responsive-iframe": "^2.2.30", 20 | "gatsby-remark-smartypants": "^2.1.19", 21 | "gatsby-source-filesystem": "^2.1.40", 22 | "gatsby-transformer-remark": "^2.6.45", 23 | "gatsby-transformer-sharp": "^2.3.9", 24 | "prop-types": "^15.7.2", 25 | "react": "^16.12.0", 26 | "react-dom": "^16.12.0", 27 | "react-helmet": "^5.2.1", 28 | "react-spring": "^8.0.27" 29 | }, 30 | "devDependencies": { 31 | "prettier": "^1.19.1" 32 | }, 33 | "keywords": [ 34 | "gatsby" 35 | ], 36 | "license": "MIT", 37 | "scripts": { 38 | "build": "gatsby build", 39 | "develop": "gatsby develop", 40 | "format": "prettier --write \"**/*.{js,jsx,json,md}\"", 41 | "start": "npm run develop", 42 | "serve": "gatsby serve", 43 | "clean": "gatsby clean", 44 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 45 | }, 46 | "repository": { 47 | "type": "git", 48 | "url": "https://github.com/gatsbyjs/gatsby-starter-default" 49 | }, 50 | "bugs": { 51 | "url": "https://github.com/gatsbyjs/gatsby/issues" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/components/EpisodeBlock.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import "./episode.css" 4 | 5 | const EpisodeBlock = ({ episodeInfo }) => { 6 | const { 7 | title, 8 | description, 9 | episode, 10 | formattedDate, 11 | path, 12 | length, 13 | } = episodeInfo.node.frontmatter 14 | return ( 15 |
19 |
20 |
21 |

{title}

22 |

{`${episode} | ${formattedDate}`}

23 |

{description}

24 |
25 |

{length}

26 |
27 | 28 | 29 | 30 |
31 | ) 32 | } 33 | 34 | export default EpisodeBlock 35 | -------------------------------------------------------------------------------- /src/components/HomeBackground.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { animated, useSprings, interpolate } from "react-spring" 3 | import "./homeBackground.css" 4 | 5 | const spotsArray = [ 6 | { 7 | width: "50px", 8 | height: "50px", 9 | backgroundColor: `rgba(250, 249, 246, .5)`, 10 | borderRadius: "50%", 11 | }, 12 | { 13 | width: "20px", 14 | height: "20px", 15 | backgroundColor: `rgba(250, 249, 246, .5)`, 16 | borderRadius: "50%", 17 | }, 18 | { 19 | width: "80px", 20 | height: "80px", 21 | backgroundColor: `rgba(250, 249, 246, .5)`, 22 | borderRadius: "50%", 23 | }, 24 | { 25 | width: "20px", 26 | height: "20px", 27 | backgroundColor: `rgba(60, 40, 41, 0.8)`, 28 | borderRadius: "50%", 29 | }, 30 | { 31 | width: "80px", 32 | height: "80px", 33 | backgroundColor: `rgba(60, 40, 41, 0.2)`, 34 | borderRadius: "50%", 35 | }, 36 | { 37 | width: "50px", 38 | height: "50px", 39 | backgroundColor: `rgba(60, 40, 41, 0.35)`, 40 | borderRadius: "50%", 41 | }, 42 | { 43 | width: "80px", 44 | height: "80px", 45 | backgroundColor: `rgba(60, 40, 41, 0.35)`, 46 | borderRadius: "50%", 47 | }, 48 | { 49 | width: "50px", 50 | height: "50px", 51 | backgroundColor: `rgba(60, 40, 41, 0.35)`, 52 | borderRadius: "50%", 53 | }, 54 | { 55 | width: "20px", 56 | height: "20px", 57 | backgroundColor: `rgba(60, 40, 41, 0.35)`, 58 | borderRadius: "50%", 59 | }, 60 | { 61 | width: "20px", 62 | height: "20px", 63 | backgroundColor: `rgba(60, 40, 41, 0.8)`, 64 | borderRadius: "50%", 65 | }, 66 | { 67 | width: "30px", 68 | height: "30px", 69 | backgroundColor: `rgba(60, 40, 41, 0.35)`, 70 | borderRadius: "50%", 71 | }, 72 | { 73 | width: "50px", 74 | height: "50px", 75 | backgroundColor: `rgba(60, 40, 41, 0.8)`, 76 | borderRadius: "50%", 77 | }, 78 | { 79 | width: "20px", 80 | height: "20px", 81 | backgroundColor: `rgba(60, 40, 41, 0.8)`, 82 | borderRadius: "50%", 83 | }, 84 | ] 85 | 86 | const from = () => ({ 87 | x: Math.random() * 900, 88 | y: Math.random() * 600, 89 | }) 90 | 91 | const to = () => ({ 92 | x: Math.random() * 800, 93 | y: Math.random() * 600, 94 | }) 95 | 96 | const HomeBackground = () => { 97 | const [props] = useSprings(spotsArray.length, () => ({ 98 | ...to(), 99 | from: from(), 100 | config: { 101 | duration: "70000", 102 | friction: "300", 103 | }, 104 | })) 105 | 106 | return ( 107 |
108 |
109 | 117 | 118 | 125 | 126 | 127 | 128 | 129 | 137 | 138 | 139 | 143 | 144 | 145 | 146 | 147 | {props.map(({ x, y }, i) => { 148 | let { width, height, backgroundColor, borderRadius } = spotsArray[i] 149 | return ( 150 | `translate3d(${x}px,${y}px,0)` 157 | ), 158 | backgroundColor: backgroundColor, 159 | width: width, 160 | height: height, 161 | borderRadius: borderRadius, 162 | }} 163 | /> 164 | ) 165 | })} 166 |
167 |
168 | ) 169 | } 170 | 171 | export default HomeBackground 172 | -------------------------------------------------------------------------------- /src/components/HomeHeader.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import Player from "./Player" 4 | import HomeBackground from "./HomeBackground" 5 | import lightLogo from "../images/brand/logo-white.svg" 6 | import "./header.css" 7 | 8 | const Header = ({ latestEpisode }) => { 9 | const { 10 | title, 11 | audio, 12 | description, 13 | length, 14 | formattedDate, 15 | path, 16 | episode, 17 | } = latestEpisode.node.frontmatter 18 | return ( 19 |
20 | 21 |
22 | 23 | Ladybug Podcast 24 | 25 | 31 |
32 | 41 |
42 | ) 43 | } 44 | 45 | export default Header 46 | -------------------------------------------------------------------------------- /src/components/PageHeader.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import logo from "../images/brand/logo.svg" 4 | import "./header.css" 5 | 6 | const Header = () => ( 7 |
8 |
9 | 10 | Ladybug Podcast 11 | 12 | 26 |
27 |
28 | ) 29 | 30 | export default Header 31 | -------------------------------------------------------------------------------- /src/components/TeamMemberBlock.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Img from "gatsby-image" 3 | import "../pages/pages.css" 4 | 5 | const TeamMemberBlock = ({ name, image, title, location, bio, links }) => ( 6 |
7 | 8 |
9 |

{name}

10 |

{title}

11 |

{location}

12 | {bio.map((paragraph, i) => ( 13 |

{paragraph}

14 | ))} 15 | {links.map((link, i) => ( 16 | 24 | {link.title} 25 | 26 | ))} 27 |
28 |
29 | ) 30 | 31 | export default TeamMemberBlock 32 | -------------------------------------------------------------------------------- /src/components/episode.css: -------------------------------------------------------------------------------- 1 | .episode { 2 | display: flex; 3 | font-family: "Montserrat"; 4 | align-items: center; 5 | justify-content: center; 6 | flex-direction: column; 7 | color: #fff; 8 | margin-top: 40px; 9 | } 10 | 11 | .episode-page-header { 12 | background: url("../images/brand/episode-header-background.svg"); 13 | background-position: center center; 14 | background-repeat: no-repeat; 15 | background-size: cover; 16 | padding: 80px; 17 | border-radius: 4px; 18 | position: relative; 19 | top: -80px; 20 | } 21 | 22 | .banner-margin { 23 | margin-top: 40px; 24 | } 25 | 26 | .episode-info { 27 | display: flex; 28 | align-items: flex-start; 29 | justify-content: center; 30 | } 31 | 32 | .episode-length { 33 | margin: 0; 34 | } 35 | 36 | .play { 37 | margin-right: 48px; 38 | width: 64px; 39 | } 40 | 41 | .episode-title { 42 | margin-bottom: 8px; 43 | margin-top: 0; 44 | font-weight: bold; 45 | } 46 | 47 | .episode-date { 48 | margin-bottom: 8px; 49 | font-size: 14px; 50 | text-transform: uppercase; 51 | } 52 | 53 | .episode-description { 54 | max-width: 580px; 55 | } 56 | 57 | .latest-episode-title { 58 | margin: 0; 59 | } 60 | 61 | .player[value] { 62 | width: 650px; 63 | height: 8px; 64 | -webkit-appearance: none; 65 | -moz-appearance: none; 66 | appearance: none; 67 | border: none; 68 | } 69 | progress { 70 | background-color: white; 71 | border-radius: 4px; 72 | } 73 | 74 | progress::-webkit-progress-bar { 75 | /* style rules */ 76 | background: white; 77 | border-radius: 4px; 78 | } 79 | progress::-webkit-progress-value { 80 | background: #3c2829; 81 | border-radius: 4px; 82 | } 83 | progress::-moz-progress-bar { 84 | /* style rules */ 85 | background: #3c2829; 86 | border-radius: 4px; 87 | } 88 | 89 | .player-container { 90 | display: flex; 91 | flex-direction: column; 92 | } 93 | 94 | .player-total-time, 95 | .player-current-time { 96 | margin: 4px 0; 97 | } 98 | 99 | .player-total-time { 100 | align-self: flex-end; 101 | } 102 | 103 | .audio-control { 104 | background: none; 105 | border: none; 106 | cursor: pointer; 107 | margin-right: 24px; 108 | } 109 | 110 | @media (max-width: 500px) { 111 | .episode { 112 | margin-top: 16px; 113 | } 114 | 115 | .episode-info { 116 | text-align: center; 117 | } 118 | } 119 | 120 | @media (max-width: 800px) { 121 | .player-container { 122 | width: 80%; 123 | } 124 | 125 | .player[value] { 126 | width: 100%; 127 | } 128 | 129 | .episode-info { 130 | flex-direction: column; 131 | padding: 0 20px; 132 | align-items: center; 133 | } 134 | 135 | .audio-control { 136 | margin-bottom: 16px; 137 | } 138 | 139 | .episode-page-header { 140 | top: 0; 141 | } 142 | } 143 | 144 | @media (max-width: 700px) { 145 | .episode.episode-page-header { 146 | width: 100vw; 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /src/components/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: #faf9f6; 3 | color: #353535; 4 | padding: 64px 0 42px; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | 11 | .footer-find-episodes { 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .footer-icons { 19 | margin-top: 16px; 20 | } 21 | 22 | .footer-icons > a { 23 | margin-right: 16px; 24 | } 25 | 26 | .footer-links { 27 | text-transform: uppercase; 28 | width: 100%; 29 | display: flex; 30 | justify-content: space-around; 31 | margin-top: 74px; 32 | flex-wrap: wrap; 33 | } 34 | 35 | .footer-links > a { 36 | text-decoration: none; 37 | color: #353535; 38 | margin-right: 16px; 39 | margin-bottom: 16px; 40 | } 41 | 42 | .footer-copyright { 43 | font-size: 0.8em; 44 | margin-top: 56px; 45 | } 46 | 47 | @media (max-width: 700px) { 48 | .footer-links { 49 | width: 80%; 50 | margin-top: 40px; 51 | flex-direction: column; 52 | align-items: center; 53 | } 54 | 55 | .footer-copyright { 56 | width: 80%; 57 | text-align: center; 58 | } 59 | } 60 | 61 | @media (max-width: 500px) { 62 | .footer { 63 | padding: 24px; 64 | text-align: center; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import twitter from "../images/footer/twitter.svg" 4 | import google from "../images/footer/google.svg" 5 | import spotify from "../images/footer/spotify.svg" 6 | import rss from "../images/footer/rss.svg" 7 | import itunes from "../images/footer/itunes.svg" 8 | import podcast from "../images/footer/podcast.svg" 9 | import "./footer.css" 10 | 11 | const Footer = () => ( 12 | 97 | ) 98 | 99 | export default Footer 100 | -------------------------------------------------------------------------------- /src/components/header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | padding: 24px; 3 | } 4 | 5 | .header-full { 6 | height: 550px; 7 | } 8 | 9 | .page-header { 10 | background-color: #fcfcfa; 11 | height: 200px; 12 | } 13 | 14 | .header-content-wrapper { 15 | display: flex; 16 | justify-content: space-between; 17 | align-items: center; 18 | } 19 | 20 | .nav { 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: flex-start; 24 | margin-right: 24px; 25 | } 26 | 27 | .nav a { 28 | margin-left: 24px; 29 | text-decoration: none; 30 | color: #1f0204; 31 | } 32 | 33 | .header-full a { 34 | color: #fff; 35 | text-decoration: none; 36 | border-bottom: 2px solid transparent; 37 | transition: border 0.1s linear; 38 | } 39 | 40 | .header-full a:hover, 41 | .header-full a:focus { 42 | color: #fff; 43 | border-bottom: 2px solid #fff; 44 | } 45 | 46 | .header-full .home-logo, 47 | .header-full .episode-header-button { 48 | border-bottom: 0; 49 | } 50 | 51 | .header-full .home-logo:hover, 52 | .header-full .home-logo:focus, 53 | .header-full .episode-header-button:focus, 54 | .header-full .episode-header-button:hover { 55 | border-bottom: 0; 56 | text-decoration: none; 57 | } 58 | 59 | .image-link, 60 | .image-link:hover, 61 | .image-link:focus { 62 | border: 0; 63 | } 64 | 65 | .image-link > img { 66 | width: 200px; 67 | margin-top: 40px; 68 | } 69 | 70 | @media (max-width: 700px) { 71 | .header-full { 72 | height: 650px; 73 | box-sizing: border-box; 74 | } 75 | 76 | .nav { 77 | margin-top: 20px; 78 | } 79 | } 80 | 81 | @media (max-width: 500px) { 82 | .nav { 83 | flex-direction: column; 84 | align-items: center; 85 | } 86 | 87 | .nav a { 88 | margin-bottom: 16px; 89 | } 90 | 91 | .header-full { 92 | height: 1000px; 93 | } 94 | 95 | .header.page-header { 96 | height: auto; 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /src/components/homeBackground.css: -------------------------------------------------------------------------------- 1 | .home-background { 2 | width: 100vw; 3 | height: 550px; 4 | background-color: #f15457; 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | z-index: -1; 9 | overflow: hidden; 10 | } 11 | 12 | .triangle-wrapper { 13 | width: 100%; 14 | height: calc(100% + 40px); 15 | position: relative; 16 | } 17 | 18 | .home-background-triangle { 19 | position: absolute; 20 | bottom: 0; 21 | width: 100%; 22 | height: 100%; 23 | z-index: 900; 24 | } 25 | 26 | .spot { 27 | border-radius: 50%; 28 | position: absolute; 29 | z-index: 90; 30 | } 31 | 32 | @media (max-width: 700px) { 33 | .home-background { 34 | height: 710px; 35 | } 36 | } 37 | 38 | @media (max-width: 500px) { 39 | .home-background { 40 | height: 1000px; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/image.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useStaticQuery, 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 | * `useStaticQuery`, 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.dev/gatsby-image 13 | * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/ 14 | */ 15 | 16 | const Image = () => { 17 | const data = useStaticQuery(graphql` 18 | query { 19 | placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { 20 | childImageSharp { 21 | fluid(maxWidth: 300) { 22 | ...GatsbyImageSharpFluid 23 | } 24 | } 25 | } 26 | } 27 | `) 28 | 29 | return 30 | } 31 | 32 | export default Image 33 | -------------------------------------------------------------------------------- /src/components/player.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import { Link } from "gatsby" 3 | import playButton from "../images/player/play-button.svg" 4 | import pauseButton from "../images/player/pause-button.svg" 5 | import "./episode.css" 6 | 7 | const Player = ({ 8 | title, 9 | audio, 10 | description, 11 | length, 12 | formattedDate, 13 | path, 14 | episode, 15 | isEpisodeHeader = false, 16 | }) => { 17 | const [isPlaying, setIsPlaying] = useState(false) 18 | const [currentTime, setCurrentTime] = useState(0) 19 | const [duration, setDuration] = useState(0) 20 | const [playerValue, setPlayerValue] = useState(0) 21 | 22 | const updateDuration = e => { 23 | setDuration(e.currentTarget.duration) 24 | } 25 | 26 | const onTimeUpdate = e => { 27 | const { currentTime } = e.currentTarget 28 | const progressTime = (currentTime / duration) * 100 29 | if (Number.isNaN(progressTime)) return 30 | setPlayerValue(progressTime) 31 | setCurrentTime(currentTime) 32 | } 33 | 34 | const jumpAudio = e => { 35 | const audioPlayer = document.getElementById("audio-player") 36 | 37 | let newListenTime = 38 | (e.nativeEvent.offsetX / e.currentTarget.offsetWidth) * duration 39 | const progressTime = (newListenTime / duration) * 100 40 | 41 | if (Number.isNaN(progressTime)) return 42 | audioPlayer.currentTime = newListenTime 43 | setPlayerValue(progressTime) 44 | setCurrentTime(newListenTime) 45 | } 46 | 47 | const formatTime = time => { 48 | let calculatedTime = time 49 | 50 | let hours = Math.floor(time / 3600) 51 | calculatedTime = time - hours * 3600 52 | let minutes = Math.floor(calculatedTime / 60) 53 | let seconds = Math.floor(calculatedTime - minutes * 60) 54 | 55 | if (seconds < 10) { 56 | seconds = `0${seconds}` 57 | } 58 | 59 | if (hours) { 60 | if (minutes < 10) { 61 | minutes = `0${minutes}` 62 | } 63 | return `${hours}:${minutes}:${seconds}` 64 | } 65 | 66 | return `${minutes}:${seconds}` 67 | } 68 | 69 | return ( 70 |
73 |
74 | 89 |
90 |

{title}

91 |

{`${episode} | ${formattedDate}`}

92 |

{description}

93 |
94 |
95 | 102 |
103 |

{length}

104 | jumpAudio(e)} 110 | /> 111 |

{formatTime(currentTime)}

112 |
113 | {!isEpisodeHeader && ( 114 | 115 | 116 | 117 | )} 118 |
119 | ) 120 | } 121 | 122 | export default Player 123 | -------------------------------------------------------------------------------- /src/components/seo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SEO component that queries for data with 3 | * Gatsby's useStaticQuery React hook 4 | * 5 | * See: https://www.gatsbyjs.org/docs/use-static-query/ 6 | */ 7 | 8 | import React from "react" 9 | import PropTypes from "prop-types" 10 | import Helmet from "react-helmet" 11 | import { useStaticQuery, graphql } from "gatsby" 12 | 13 | function SEO({ description, lang, meta, title }) { 14 | const { site } = useStaticQuery( 15 | graphql` 16 | query { 17 | site { 18 | siteMetadata { 19 | title 20 | description 21 | author 22 | } 23 | } 24 | } 25 | ` 26 | ) 27 | 28 | const metaDescription = description || site.siteMetadata.description 29 | 30 | return ( 31 | 72 | ) 73 | } 74 | 75 | SEO.defaultProps = { 76 | lang: `en`, 77 | meta: [], 78 | description: ``, 79 | } 80 | 81 | SEO.propTypes = { 82 | description: PropTypes.string, 83 | lang: PropTypes.string, 84 | meta: PropTypes.arrayOf(PropTypes.object), 85 | title: PropTypes.string.isRequired, 86 | } 87 | 88 | export default SEO 89 | -------------------------------------------------------------------------------- /src/data/bios.js: -------------------------------------------------------------------------------- 1 | export const kellyBio = { 2 | name: "Kelly Vaughn", 3 | title: "Frontend Developer", 4 | location: "Atlanta, GA", 5 | bio: [ 6 | `Kelly Vaughn is a frontend developer and founder of The Taproom, a 7 | Shopify Plus agency rooted in Atlanta. Kelly and her team have helped 8 | hundreds of Shopify merchants build successful marketing strategies; map 9 | out customer journeys that convert; and provide the insight, experience, 10 | and tools businesses need to keep growing.`, 11 | `She's passionate about all things entrepreneurship. Since building her 12 | first website for a client project at the young age of 14, she has built 13 | up a strong customer base over the past 15 years and grew her solo 14 | freelance business from a team of one to an always-profitable team of 15 | ten in just one year.`, 16 | `When she's not coding or co-hosting the Ladybug Podcast, you can find 17 | her launching new products on her own developer merch Shopify store, traveling the world with her husband, and sampling all the wine and 18 | whiskey she can get her hands on.`, 19 | ], 20 | links: [ 21 | { 22 | title: "Developer Merch", 23 | link: "https://kvlly.com/", 24 | }, 25 | { 26 | title: "Twitter", 27 | link: "https://twitter.com/kvlly", 28 | }, 29 | ], 30 | } 31 | 32 | export const emmaBio = { 33 | name: "Emma Bostian", 34 | title: "Software Engineer", 35 | location: "Karlsruhe, Germany", 36 | bio: [ 37 | `Emma is a Software Engineer at LogMeIn in Karlsruhe, Germany. Born and raised in Upstate New York, Emma graduated from Siena College in Albany with a B.S. in Computer Science and moved to Austin, Texas for three years where she worked as an engineer at IBM.`, 38 | `Currently Emma is focused on building a design system at LogMeIn and has a multitude of side projects. She founded an open source project, Coding Coach in September of 2018, is a Frontend Masters instructor, Egghead.io instructor, teaches at Lynda.com, and much much more!`, 39 | ], 40 | links: [ 41 | { 42 | title: "Coding Coach", 43 | link: "https://codingcoach.io/", 44 | }, 45 | { 46 | title: "Twitter", 47 | link: "https://twitter.com/emmabostian", 48 | }, 49 | ], 50 | } 51 | 52 | export const aliBio = { 53 | name: "Ali Spittel", 54 | title: "Software Engineer", 55 | location: "Digital Nomad", 56 | bio: [ 57 | `Ali teaches people to code. She is a Distinguished Faculty member at General Assembly teaching their Software Engineering Immersive for campus, online, and enterprise programs. She has also taught their Python part-time class, and is part of their Python Product Advisory Board.`, 58 | `She has also been a software engineer and developer advocate. She also blogs about the things she wished she knew when she was learning to code. Her blog posts have been read well over a million times. She also speaks and gives workshops at conferences all over the world.`, 59 | `When she's not coding, you can find her watching trashy tv shows, running with her dog Blair, or rock climbing. She's a digital nomad, and lives in a new city pretty much every month.`, 60 | ], 61 | links: [ 62 | { 63 | title: "We Learn Code", 64 | link: "https://welearncode.com", 65 | }, 66 | { 67 | title: "Twitter", 68 | link: "https://twitter.com/ASpittel", 69 | }, 70 | ], 71 | } 72 | -------------------------------------------------------------------------------- /src/episodes/2019-07-01-new-career-who-dis/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: New Career, Who Dis? 3 | formattedDate: "July 1, 2019" 4 | date: "2019-07-01" 5 | audio: https://pinecast.com/listen/7f46f5b6-8b50-4bce-825a-1f72c7e6ec45.mp3 6 | path: "/new-career-who-dis" 7 | description: "There are several different ways you can learn how to code. In this episode, we discuss computer science degrees, bootcamps, and self-directed learning. Each has benefits and have brought a lot of people into the world of programming. Each also has challenges. We all have had unique paths to programming, so we'll incorporate our experiences and observations." 8 | episode: "Season 1 Episode 1" 9 | length: "47:58" 10 | --- 11 | 12 | # Show notes 13 | 14 | **00:40** - How we got started coding 15 | 16 | **03:55** - Ali's Story 17 | 18 | **06:58** - Emma's story 19 | 20 | **12:43** - Thoughts on formal education 21 | 22 | **21:44** - Thoughts on bootcamps 23 | 24 | **32:36** - Thoughts on self-directed learning 25 | 26 | **39:19** - Resources for self-directed learning 27 | 28 | **44:26** - Our Wins 29 | 30 | # Resources 31 | 32 | - [My Favorite Free Resources for New Programmers](https://dev.to/aspittel/my-favorite-free-resources-for-new-programmers-bia) 33 | - [How To Learn JavaScript](https://dev.to/emmawedekind/how-to-learn-javascript-54i6) 34 | - [Start with Why](https://smile.amazon.com/Start-Why-Leaders-Inspire-Everyone/dp/1591846447?sa-no-redirect=1) 35 | - [General Assembly](https://generalassemb.ly/) 36 | - [Flat Iron School](https://flatironschool.com/) 37 | - [Lambda School](https://lambdaschool.com/) 38 | - [Codecademy](https://www.codecademy.com/) 39 | - [FreeCodeCamp](https://www.freecodecamp.org/) 40 | - [Treehouse](https://teamtreehouse.com/) 41 | - [Lynda](https://www.lynda.com/) 42 | - [JavaScript30](https://javascript30.com/) 43 | - [Egghead](https://egghead.io/) 44 | - [Twitter](https://twitter.com) 45 | - [Blog posts](https://dev.to) 46 | 47 | # Transcript 48 | 49 | We provide transcripts for all of our episodes. You can find them [here](https://github.com/ladybug-podcast/ladybugpodcast/tree/master/transcripts)! 50 | -------------------------------------------------------------------------------- /src/episodes/2019-07-08-side-project-balancing-act/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Side Project Balancing Act 3 | formattedDate: "July 8, 2019" 4 | date: "2019-07-08" 5 | audio: https://pinecast.com/listen/72146c58-3e8b-4674-94ad-8ddcd663ce6f.mp3 6 | path: "/side-project-balancing-act" 7 | description: "Side projects are an excellent way to express yourself creatively and build up your tech stack. But how do you find time to work on your side project when you have a full-time job and other responsibilities at home? In this episode, we discuss our personal side projects, along with some useful strategies for giving your side projects the attention they deserve." 8 | episode: "Season 1 Episode 2" 9 | length: "32:03" 10 | --- 11 | 12 | # Show notes 13 | 14 | **00:40** - Our side projects 15 | 16 | **04:12** - Prioritizing side projects 17 | 18 | **07:38** - Side project motivation 19 | 20 | **10:26** - Shiny new technologies 21 | 22 | **16:23** - Understanding yourself 23 | 24 | **18:45** - Staying balanced & productive 25 | 26 | **21:53** - New roles 27 | 28 | **23:12** - Batching 101 29 | 30 | **26:20** - Tracking your wins 31 | 32 | **29:52** - Our weekly win 33 | 34 | # Resources 35 | 36 | - [Full-time, side projects, learning, and staying sane](https://dev.to/simoroshka/full-time-side-projects-learning-and-staying-sane-328l) 37 | - [How I learned to be more productive with my workdays](https://dev.to/kelly/how-i-learned-to-be-more-productive-with-my-workdays-5f14) 38 | - [How To Boost Your Productivity & Get Sh\*t Done](https://dev.to/emmawedekind/how-to-boost-your-productivity--get-sht-done-3h5n) 39 | - [Atomic Habits](https://smile.amazon.com/Atomic-Habits-Proven-Build-Break/dp/0735211299?sa-no-redirect=1) 40 | 41 | ## Transcript 42 | 43 | We provide transcripts for all of our episodes. You can find them here! 44 | -------------------------------------------------------------------------------- /src/episodes/2019-07-15-blogging-101/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Blogging 101 3 | formattedDate: "July 15, 2019" 4 | date: "2019-07-15" 5 | audio: https://pinecast.com/listen/3beb3125-a779-49c4-b938-552318d8beea.mp3 6 | path: "/blogging-101" 7 | description: "One of the most popular outlets for programmers is through blogging. In this episode, we discuss why each of us got into blogging, the pros and cons of starting your own blog, and tips on how to make your blog a success." 8 | episode: "Season 1 Episode 3" 9 | length: "1:06:29" 10 | --- 11 | 12 | # Show Notes 13 | 14 | **0:34** - Why we blog 15 | 16 | **6:44** - Teaching through blogging 17 | 18 | **8:44** - Monetizing your blog 19 | 20 | **12:22** - Gaining an audience 21 | 22 | **13:43** - Our path to blogging 23 | 24 | **21:19** - Non technical blogs 25 | 26 | **23:46** - Blogging workflows 27 | 28 | **36:38** - Gaining an audience 29 | 30 | **43:35** - Downsides of blogging 31 | 32 | **52:06** - Casual blogging 33 | 34 | **53:47** - Gaining confidence 35 | 36 | **55:37** - Do you need to be an expert 37 | 38 | **58:57** - Blogging platforms 39 | 40 | **59:46** - Canonical URLs 41 | 42 | **01:02:13** - Wins 43 | 44 | # Resources 45 | 46 | - [Hemingway](http://hemingwayapp.com) 47 | - [Grammarly](https://www.grammarly.com/) 48 | - [Raquel Breternitz](https://www.linkedin.com/in/raquel-breternitz/) 49 | - [Faux Fur](https://www.popsugar.com/fashion/Faux-Fur-Vests-More-10902641) 50 | - [My Blog Post Workflow](https://dev.to/aspittel/my-blog-post-workflow-from-topic-to-publication-4n78) 51 | - [My Blog Editing Workflow](https://www.a11ywithlindsey.com/blog/blogging-editing-process) 52 | 53 | # Transcript 54 | 55 | We provide transcripts for all of our episodes. You can find them [here](https://github.com/ladybug-podcast/ladybugpodcast/tree/master/transcripts)! 56 | -------------------------------------------------------------------------------- /src/episodes/2019-07-22-web-technologies-were-excited-about/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Web Technologies We're Excited About 3 | formattedDate: "July 22, 2019" 4 | date: "2019-07-22" 5 | audio: https://pinecast.com/listen/3f579786-1d98-45d3-80e4-820066e39e7d.mp3 6 | path: "/web-technologies-were-excited-about" 7 | description: "The landscape of technologies you can learn in the development world can be overwhelming if you don't know where to go next. In this episode, we discuss the technologies we're most excited about. From CSS to GraphQL, Django to WebAssembly, and design to augmented reality - we cover it all." 8 | episode: "Season 1 Episode 4" 9 | length: "39:01" 10 | --- 11 | 12 | # Show notes 13 | 14 | # Resources 15 | 16 | - [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/var) 17 | - [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) 18 | - [Houdini](https://css-tricks.com/interactive-introduction-to-css-houdini/) 19 | - [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 20 | - [Sub Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid) 21 | - [CSS Specificity](https://dev.to/emmawedekind/css-specificity-1kca) 22 | - [GraphQL](https://graphql.org/) 23 | - [Gatsby](https://www.gatsbyjs.org/) 24 | - [Gatsby Live Stream](https://www.youtube.com/watch?v=W2uTfay3doo) 25 | - [Python](https://www.python.org/) 26 | - [Django](https://www.djangoproject.com/) 27 | - [Jupyter Notebooks](https://jupyter.org/) 28 | - [HotJar](https://www.hotjar.com/) 29 | - [Figma](https://www.figma.com/) 30 | - [Web Assembly](https://webassembly.org/) 31 | - [Sketch](https://www.sketch.com/) 32 | - [Lin Clark](https://twitter.com/linclark) 33 | - [Facial Recognition In JavaScript](https://dev.to/aspittel/facial-recognition-in-javascript-using-trackingjs-3l7) 34 | 35 | # Transcript 36 | 37 | We provide transcripts for all of our episodes. You can find them [here](https://github.com/ladybug-podcast/ladybugpodcast/tree/master/transcripts)! 38 | -------------------------------------------------------------------------------- /src/episodes/2019-07-29-how-the-ladybugs-got-their-spots/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How the Ladybugs Got Their Spots 3 | formattedDate: "July 29, 2019" 4 | date: "2019-07-29" 5 | audio: https://pinecast.com/listen/4457a541-3098-456f-9e7f-f13b7d107900.mp3 6 | path: "/how-the-ladybugs-got-their-spots" 7 | description: "In this episode, we're getting to know the ladybug hosts, both on technical and non-technical topics. Listen in to learn about our favorite tech stacks, our biggest career milestones, favorite books, and more." 8 | episode: "Seaon 1 Episode 5" 9 | length: "37:28" 10 | ---# Show notes 11 | 12 | **0:36** - Favorite stacks 13 | 14 | **2:36** - Favorite food 15 | 16 | **6:52** - Favorite question to be asked 17 | 18 | **10:38** - Our pets 19 | 20 | **13:57** - Favorite TV shows 21 | 22 | **17:31** - Favorite books 23 | 24 | **22:07** - Favorite type of code to write 25 | 26 | **23:23** - Biggest career milestone 27 | 28 | **27:54** - Biggest day-to-day inspiration 29 | 30 | **31:20** - Non-tech dream job 31 | 32 | **34:07** - Wins 33 | 34 | # Transcript 35 | 36 | We provide transcripts for all of our episodes. You can find them [here](https://github.com/ladybug-podcast/ladybugpodcast/tree/master/transcripts)! 37 | -------------------------------------------------------------------------------- /src/episodes/2019-08-05-impostor-syndrome/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Impostor Syndrome 3 | formattedDate: "August 5, 2019" 4 | date: "2019-08-05" 5 | audio: https://pinecast.com/listen/fba18fde-789e-4040-8915-34d3b3334b84.mp3 6 | path: "/impostor-syndrome" 7 | description: "Have you ever been scared to contribute to a conversation or publish a blog post because you were worried you weren’t qualified enough? Wondered how you got to the point you’re at in your career because you feel you don’t belong? Or that you’re a fraud? You’re not alone! In this episode, we discuss how we have experienced impostor syndrome and our personal strategies for combatting it." 8 | episode: "Season 1 Episode 6" 9 | length: "41:17" 10 | --- 11 | 12 | # Show notes 13 | 14 | **0:36** - Our impostor syndrome 15 | 16 | **0:48** - Job interviews 17 | 18 | **2:04** - Quitting computer science 19 | 20 | **7:19** - Speaking at a conference 21 | 22 | **11:46** - Impostor syndrome & teaching 23 | 24 | **13:11** - Negative backlash 25 | 26 | **16:32** - Running a company 27 | 28 | **17:56** - Receiving criticism 29 | 30 | **21:21** - Impostor syndrome as a business owner 31 | 32 | **21:55** - Turning impostor syndrome into motivation 33 | 34 | **24:40** - Combatting impostor syndrome 35 | 36 | **37:24** - Wins 37 | 38 | # Resources: 39 | 40 | - [The truth about impostor syndrome](https://dev.to/kelly/the-truth-about-impostor-syndrome-165h) 41 | - [Why I keep an 'Accomplishments / Good Stuff' List](https://dev.to/seankilleen/why-i-keep-an-accomplishments--good-stuff-list-1fni) 42 | 43 | # Transcript 44 | 45 | We provide transcripts for all of our episodes. You can find them [here](https://github.com/ladybug-podcast/ladybugpodcast/tree/master/transcripts)! 46 | -------------------------------------------------------------------------------- /src/episodes/2019-08-12-css-part-1/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Level Up With CSS - Part 1 3 | formattedDate: "August 12, 2019" 4 | date: "2019-08-12" 5 | audio: https://storage.pinecast.net/podcasts/8b501593-cabc-49f4-b076-b7c2e3bca56f/audio/a7e6cbbb-5abb-40f1-a644-32b25edb8f2d/css-p1-with-sponsors.mp3 6 | path: "/css-part-1" 7 | description: "Learn all about the fundamentals of CSS: from selectors to the box model." 8 | episode: "Season 1 Episode 7" 9 | length: "38:38" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | LogRocket 17 | 18 | How many times have you struggled to figure out an annoying bug in your app? Well struggle no more! Log Rocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. You can see a perfect replay of what your users saw, inspect Redux actions and state at any point in time, view every network request and response, and even inspect console logs and JavaScript errors. Log Rocket lets you support your users without the tedious back and forth conversations. Plus it works with React, Angular, vanilla JavaScript, Redux, Ember, and Vue! Check out Log Rocket today to improve your debugging workflow. 19 | 20 | Sanity.io 21 | 22 | Sanity.io is a platform for structured content that comes with an open source editor that you can customize with React. Sanity.io also comes with tooling that lets you build with structured content in React, Vue, and other frontend technologies like Svelte. It also has powerful APIs for reading and writing so that you can use the same content across any device, channel, or product. You also get powerful APIs for querying your content, you can even listen for changes in real-time, and use the write APIs to patch and make new documents from code. You can get started for free on the standard plan, and add a credit card to pay as you go for usage over the generous standard quotas. If you need advanced features like SSL and Single-Sign-On you can find all the prices and details on Sanity.io's fully transparent pricing page. Listeners of the Ladybug Podcast get a extra special plan with double the usage. Go to sanity.io/ladybug or use "ladybug" where you fill in the coupon code. 23 | 24 | # Show notes 25 | 26 | **1:50** - Pain points 27 | 28 | **4:23** - Syntax 29 | 30 | **10:40** - The cascade 31 | 32 | **13:38** - The box model 33 | 34 | **15:23** - Pseudo classes and pseudo elements 35 | 36 | **19:09** - Combinators 37 | 38 | **23:11** - Positioning 39 | 40 | **28:48** - Block, inline, and inline-block 41 | 42 | **36:11** - Wins 43 | 44 | # Resources 45 | 46 | - [CSS Specificity](https://dev.to/emmawedekind/css-specificity-1kca) 47 | - [CSS: From Zero to Hero](https://dev.to/aspittel/css-from-zero-to-hero-3o16) 48 | - [CSS Diner](https://flukeout.github.io/") 49 | - [CanIUse](https://caniuse.com/) 50 | - [CSS Tricks](https://css-tricks.com/) 51 | - [CSS MDN](https://developer.mozilla.org/en-US/docs/Web/CSS) 52 | - [CSS Layout Cookbook](https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook) 53 | - [Pseudo classes and pseudo elements](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements) 54 | 55 | # Transcript 56 | 57 | We provide transcripts for all of our episodes. You can find them [here](https://github.com/ladybug-podcast/ladybugpodcast/tree/master/transcripts)! 58 | -------------------------------------------------------------------------------- /src/episodes/2019-08-14-css-part-2/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Level Up With CSS - Part 2 3 | formattedDate: "August 14, 2019" 4 | date: "2019-08-14" 5 | audio: https://pinecast.com/listen/b3a6126a-b711-4020-b00e-a555a9b330e3.mp3 6 | path: "/css-part-2" 7 | description: "In the first part of our CSS episode, we discussed the foundations. In this special bonus episode we'll continue the conversation by covering some more in-depth areas of CSS, like layouts with Grid and Flexbox, animations, media queries, naming conventions, pre-processors, and frameworks." 8 | episode: "Season 1 Episode 8" 9 | length: "41:03" 10 | --- 11 | 12 | # Show notes 13 | 14 | **0:32** - Grid and Flexbox 15 | 16 | **7:07** - Animations 17 | 18 | **15:12** - Media queries 19 | 20 | **19:50** - Naming conventions/hierarchy 21 | 22 | **23:47** - Pre-processessors & tools 23 | 24 | **33:35** - UI frameworks 25 | 26 | **37:50** - Wins 27 | 28 | # Resources 29 | 30 | - [Flexbox Froggy](https://flexboxfroggy.com/) 31 | - [Grid Garden](https://cssgridgarden.com/) 32 | - [CSS Tricks A Complete Guide To Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 33 | - [CSS Tricks A Complete Guide To Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 34 | - [CSS Flexbox vs. CSS Grid](https://levelup.gitconnected.com/when-to-use-css-flexbox-vs-grid-or-both-c1a5f01dc88a) 35 | - [Flexbox Defense](http://www.flexboxdefense.com/) 36 | - [Sarah Drasner’s CSS Grid Generator](https://cssgrid-generator.netlify.com/) 37 | - [Cubic Bezier Generator](https://cubic-bezier.com/#.17,.67,.83,.67) 38 | - [BEM](http://getbem.com/") 39 | - [SMAACS](http://smacss.com/") 40 | - [Bootstrap](https://getbootstrap.com/") 41 | - [Zurb Foundation](https://foundation.zurb.com/") 42 | - [Bulma CSS](https://bulma.io/") 43 | - [TailwindCSS](https://tailwindcss.com/") 44 | - [Stylus UI Framework](http://stylus-lang.com/") 45 | - [VSCode Style Lint Plugin](https://github.com/shinnn/vscode-stylelint") 46 | 47 | # Transcript 48 | 49 | We provide transcripts for all of our episodes. You can find them here! 50 | -------------------------------------------------------------------------------- /src/episodes/2019-08-19-ask-kelly-about-entrepreneurship/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ask Kelly about Entrepreneurship 3 | formattedDate: "August 19, 2019" 4 | date: "2019-08-19" 5 | audio: https://pinecast-storage.s3.amazonaws.com/podcasts/8b501593-cabc-49f4-b076-b7c2e3bca56f/audio/025fd729-15a4-4eb6-95d7-526fa5f2d354/entrepreneurship.mp3 6 | path: "/ask-kelly-about-entrepreneurship" 7 | description: "Today we are doing a deep dive about entrepreneurship with our in house business owner, Kelly! Everyone can benefit from thinking entrepreneurially, even people who don’t want to start their own business. We’re going to ask Kelly about all the things that we are curious about and scare us about entrepreneurship." 8 | episode: "Season 1 Episode 9" 9 | length: "39:47" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | Sanity.io 17 | 18 | Sanity.io is a platform for structured content that comes with an open source editor that you can customize with React. Sanity.io also comes with tooling that lets you build with structured content in React, Vue, and other frontend technologies like Svelte. It also has powerful APIs for reading and writing so that you can use the same content across any device, channel, or product. You also get powerful APIs for querying your content, you can even listen for changes in real-time, and use the write APIs to patch and make new documents from code. You can get started for free on the standard plan, and add a credit card to pay as you go for usage over the generous standard quotas. If you need advanced features like SSL and Single-Sign-On you can find all the prices and details on Sanity.io's fully transparent pricing page. Listeners of the Ladybug Podcast get a extra special plan with double the usage. Go to sanity.io/ladybug or use "ladybug" where you fill in the coupon code. 19 | 20 | Shopify Careers 21 | 22 | Have you taken time off from your career as a software developer? Get back into it with Welcome Back by Shopify. If you’ve taken extended leave for sickness, parental, or personal reasons, Welcome Back by Shopify will help you re-enter the tech industry with confidence. Refresh your software development skills and get hands-on training with this immersive, 3-month paid program…built by Shopify’s Engineering team. Welcome Back also rebuilds context gathering, cross-team communication, and problem identification muscles to help developers reenter the workforce at a senior level. This program is available in Shopify’s Ottawa and Toronto offices but if you’re interested in visiting Canada and coding, be sure to apply! Who knows, maybe you’ll unlock a new career in a new country! Experienced software developers can apply before September 13th by searching Shopify Welcome Back or visiting shopify.com/careers. 23 | 24 | JAMStack Conf Website 25 | 26 | We want to tell you about the JAMStack Conference, happening Oct 16-18 in San Francisco. So what’s the JAMstack? Chris Coyier got to the heart of it when he said the explosion of new APIs and tools are providing front end developers with full stack superpowers. We call this new approach the JAMstack. 27 | 28 | Hear from Chris, Mandy Michael, Katie Sylor-Miller and more at this two-day event covering topics from web performance to static site generators to modern build tools and workflows. On day three you'll have the option to join hands-on workshops about serverless functions, front end adventures and more. 29 | 30 | Podcast listeners can save 10% using the discount code “ladybug” when you sign up. You are also encouraged to apply for a diversity scholarship by August 23rd. Hurry—the last two JAMstack events sold out. All the details are at JAMstackconf.com 31 | 32 | # Show notes 33 | 34 | **0:34** - Kelly's backstory 35 | 36 | **1:35** - What made you transition from freelancing to business owner? 37 | 38 | **2:39** - How did you find your first clients? 39 | 40 | **4:23** - How did you get into Shopify and the e-commerce space? 41 | 42 | **5:51** - Do you think it's important to have a specialization? 43 | 44 | **6:39** - What's the biggest piece of advice you would give to someone who's afraid of starting their own business? 45 | 46 | **8:54** - What's the biggest thing you don't like about running a business? 47 | 48 | **10:10** - What are the different types of businesses you can establish? 49 | 50 | **12:04** - Sole proprietorship or LLC? 51 | 52 | **13:08** - What's the biggest thing you wish you knew before starting a business? 53 | 54 | **13:58** - Do you still get to write code? 55 | 56 | **14:32** - How many hours a week do you work? 57 | 58 | **16:36** - Do you always want to run your own business? 59 | 60 | **17:35** - Can you explain the origin of The Taproom? 61 | 62 | **20:15** - Do you have employees? If so, how did you hire them? 63 | 64 | **23:04** - How do payroll and taxes work? 65 | 66 | **24:01** - How do you foster healthy relationships with remote workers? 67 | 68 | **25:01** - How much revenue do you take vs. re-investing? 69 | 70 | **28:10** - What books do you recommend for those wanting to learn more about business? 71 | 72 | **30:17** - What's the hardest part about being a manager? 73 | 74 | **32:16** - What does being a Shopify Plus Partner mean? 75 | 76 | # Resources 77 | 78 | - [Gusto](https://gusto.com/) 79 | - [Roam Innovation Workplace](https://meetatroam.com/) 80 | - [The Taproom](https://thetaproom.com/) 81 | - [Company Of One](https://ofone.co/) 82 | - [Profit First](https://profitfirstbook.com/) 83 | - [The Effective Manager](https://www.manager-tools.com/products/effective-manager-book) 84 | - [Manager Tools Podcast](https://www.manager-tools.com/) 85 | - [Shopfiy](https://www.shopify.com/) 86 | - [Dev Jokes](https://dev.to/t/jokes) 87 | 88 | # Transcript 89 | 90 | We provide transcripts for all of our episodes. You can find them here! 91 | -------------------------------------------------------------------------------- /src/episodes/2019-08-26-career-paths-in-tech/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Career Paths in Tech 3 | formattedDate: "August 26, 2019" 4 | date: "2019-08-26" 5 | audio: https://pinecast.com/listen/7277ecc7-0bbf-44e5-b11f-b4556935a196.mp3 6 | path: "/career-paths-in-tech" 7 | description: "There are so many different paths your career can follow in the tech industry. There's frontend, backend, or even full-stack development. You could also be a software engineer, quality assurance engineer, UX engineer, manager, developer advocate, or something else entirely!" 8 | episode: "Season 1 Episode 10" 9 | length: "49:58" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | Sanity.io 17 | 18 | Sanity.io is a platform for structured content that comes with an open source editor that you can customize with React. Sanity.io also comes with tooling that lets you build with structured content in React, Vue, and other frontend technologies like Svelte. It also has powerful APIs for reading and writing so that you can use the same content across any device, channel, or product. You also get powerful APIs for querying your content, you can even listen for changes in real-time, and use the write APIs to patch and make new documents from code. You can get started for free on the standard plan, and add a credit card to pay as you go for usage over the generous standard quotas. If you need advanced features like SSL and Single-Sign-On you can find all the prices and details on Sanity.io's fully transparent pricing page. Listeners of the Ladybug Podcast get a extra special plan with double the usage. Go to sanity.io/ladybug or use "ladybug" where you fill in the coupon code. 19 | 20 | Shopify Careers 21 | 22 | Are you a developer looking for your next challenge? Meet Shopify. We’re on a mission to make commerce better for everyone - but we do things a bit differently. We don’t tell people how to solve problems - we give them the tools, trust, and autonomy to build new solutions. We don’t work alone - we leverage the diverse perspectives across our teams in everything we do. And we don’t have all the answers - we’re big enough to tackle problems at scale but small enough that we haven’t figured them all out. If you’re a builder at heart who wants to solve highly technical problems. If you want to take all of your life experiences and apply them to a blank canvas. Or if you want access to really powerful tools - Shopify is the place for you. Visit shopify.com/careers today. 23 | 24 | JAMStack Conf Website 25 | 26 | We want to tell you about the JAMStack Conference, happening Oct 16-18 in San Francisco. So what’s the JAMstack? Chris Coyier got to the heart of it when he said the explosion of new APIs and tools are providing front end developers with full stack superpowers. We call this new approach the JAMstack. 27 | 28 | Hear from Chris, Mandy Michael, Katie Sylor-Miller and more at this two-day event covering topics from web performance to static site generators to modern build tools and workflows. On day three you'll have the option to join hands-on workshops about serverless functions, front end adventures and more. 29 | 30 | Podcast listeners can save 10% using the discount code “ladybug” when you sign up. You are also encouraged to apply for a diversity scholarship by August 23rd. Hurry—the last two JAMstack events sold out. All the details are at JAMstackconf.com 31 | 32 | # Show notes 33 | 34 | **1:47** - Frontend Developer 35 | 36 | **9:16** - Backend Developer 37 | 38 | **12:51** - Full-stack Developer 39 | 40 | **20:15** - UX Engineer 41 | 42 | **25:16** - Dev Ops 43 | 44 | **27:50** - QA Engineer 45 | 46 | **30:37** - Software Architect 47 | 48 | **33:59** - Developer Advocate / Evangelist 49 | 50 | **36:38** - Open Source Maintainer 51 | 52 | **41:30** - Manager 53 | 54 | **47:10** - Wins 55 | 56 | ## Resources 57 | 58 | - [Glassdoor](https://www.glassdoor.com/index.htm) 59 | - [Monster](https://www.monster.com/) 60 | - [Indeed](https://www.indeed.com/) 61 | - [LinkedIn Jobs](https://www.linkedin.com/jobs) 62 | - [CSS Tricks Job Board](https://css-tricks.com/jobs/) 63 | - [The Great Divide](https://css-tricks.com/the-great-divide/) 64 | - [Developer Avocados](https://www.marythengvall.com/blog/2018/1/31/developer-avocados-the-good-kind-of-fat) 65 | - [Developer to Manager: A Survival Guide](https://www.youtube.com/watch?v=R3MrhGieYj0) 66 | 67 | # Transcript 68 | 69 | We provide transcripts for all of our episodes. You can find them here! 70 | -------------------------------------------------------------------------------- /src/episodes/2019-09-16-what-the-heck-is-graphql/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: What The Heck Is GraphQL? 3 | formattedDate: "September 16, 2019" 4 | date: "2019-09-16" 5 | audio: https://pinecast.com/listen/a392ada5-317d-4904-a04c-34989accdb57.mp3 6 | path: "/what-the-heck-is-graphql" 7 | description: "GraphQL has taken this industry by storm, but what is it exactly? In this special episode of the Ladybug Podcast we’ve invited 14 GraphQL experts from the community to educate us on all things GraphQL!" 8 | episode: "Season 1 Episode 11" 9 | length: "1:05:45" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | 17 | LogRocket Website 18 | 19 | How many times have you struggled to figure out an annoying bug in your app? Well struggle no more! Log Rocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. You can see a perfect replay of what your users saw, inspect Redux actions and state at any point in time, view every network request and response, and even inspect console logs and JavaScript errors. Log Rocket lets you support your users without the tedious back and forth conversations. Plus it works with React, Angular, vanilla JavaScript, Redux, Ember, and Vue! Check out Log Rocket today to improve your debugging workflow. 20 | 21 | Sanity.io 22 | 23 | Sanity.io is a platform for structured content that comes with an open source editor that you can customize with React. Sanity.io also comes with tooling that lets you build with structured content in React, Vue, and other frontend technologies like Svelte. It also has powerful APIs for reading and writing so that you can use the same content across any device, channel, or product. You also get powerful APIs for querying your content, you can even listen for changes in real-time, and use the write APIs to patch and make new documents from code. You can get started for free on the standard plan, and add a credit card to pay as you go for usage over the generous standard quotas. If you need advanced features like SSL and Single-Sign-On you can find all the prices and details on Sanity.io's fully transparent pricing page. Listeners of the Ladybug Podcast get a extra special plan with double the usage. Go to sanity.io/ladybug or use "ladybug" where you fill in the coupon code. 24 | 25 | Shopify Careers 26 | 27 | Are you a developer looking for your next challenge? Meet Shopify. We’re on a mission to make commerce better for everyone - but we do things a bit differently. We don’t tell people how to solve problems - we give them the tools, trust, and autonomy to build new solutions. We don’t work alone - we leverage the diverse perspectives across our teams in everything we do. And we don’t have all the answers - we’re big enough to tackle problems at scale but small enough that we haven’t figured them all out. If you’re a builder at heart who wants to solve highly technical problems. If you want to take all of your life experiences and apply them to a blank canvas. Or if you want access to really powerful tools - Shopify is the place for you. Visit shopify.com/careers today. 28 | 29 | # Show notes 30 | 31 | **2:00** - What Is GraphQL? ([Erin Fox](https://twitter.com/erinfoox)) 32 | 33 | **8:21** - Benefits Of GraphQL ([Akshar Takle](https://twitter.com/AksharVT)) 34 | 35 | **11:19** - History Of GraphQL ([Brian Douglas](https://twitter.com/bdougieYO)) 36 | 37 | **14:01** - Syntax ([Chris Biscardi](https://twitter.com/chrisbiscardi)) 38 | 39 | **17:01** - Schemas ([Kurt Kemple](https://twitter.com/kurtiskemple)) 40 | 41 | **20:02** - Variables ([Swyx](https://twitter.com/swyx)) 42 | 43 | **24:24** - Fragments ([Emma Wedekind](https://twitter.com/emmawedekind)) 44 | 45 | **25:36** - Directives ([Jon Wong](https://twitter.com/jnwng)) 46 | 47 | **32:10** - Toolkit ([Alan Johnson](https://twitter.com/AlanJay1)) 48 | 49 | **38:49** - React Hooks & GraphQL ([Shruti Kapoor](https://twitter.com/shrutikapoor08)) 50 | 51 | **46:13** - GraphQL vs. REST ([Chantastic](https://twitter.com/chantastic)) 52 | 53 | **49:20** - When NOT To Use GraphQL ([Zach Lendon](https://twitter.com/zachlendon)) 54 | 55 | **54:37** - Useful Tools For Learning/Using GraphQL ([Manjula Dube](https://twitter.com/manjula_dube)) 56 | 57 | **1:01:27** - Making GraphQL Development Easier With Hasura ([Rajoshi Ghosh](https://twitter.com/rajoshighosh)) 58 | 59 | **1:05:06** - Wins 60 | 61 | # Resources 62 | 63 | - [Understanding GraphQL](https://medium.com/@erinfoox/understanding-graphql-finally-a75986d8df0a) 64 | - [Sacha Greif's GraphQL Article](https://www.freecodecamp.org/news/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf/)[ 65 | - [Graphiql](https://electronjs.org/apps/graphiql) 66 | - [Babel Blade Plugin](https://github.com/sw-yx/babel-blade) 67 | - [ESlint GraphQL Plugin](https://github.com/apollographql/eslint-plugin-graphql) 68 | - [Is GraphQL The Future?](https://artsy.github.io/blog/2018/05/08/is-graphql-the-future/) 69 | - [Shruti Kapoor's Hooks & GraphQL Repo](https://github.com/shrutikapoor08/hooks-graphQL) 70 | - [GraphQL Editor](https://graphqleditor.com/) 71 | - [GraphQL Playground](https://github.com/prisma/graphql-playground) 72 | - [Hasura's GraphQL Tutorials](https://learn.hasura.io/) 73 | 74 | # Transcript 75 | 76 | We provide transcripts for all of our episodes. You can find them here! 77 | -------------------------------------------------------------------------------- /src/episodes/2019-09-23-teaching-code/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How To Teach Code 3 | formattedDate: "September 23, 2019" 4 | date: "2019-09-23" 5 | audio: https://storage.pinecast.net/podcasts/8b501593-cabc-49f4-b076-b7c2e3bca56f/audio/4c4ec084-6e59-4f0d-9da6-646a610dc9a7/Ladybug_Podcast_-_Education_In_Tech.mp3 6 | path: "/teaching-code" 7 | description: "Have you ever wondered what it takes to be an effective teacher in the tech industry? Well, wonder no more. We had the pleasure of chatting with Angie Jones, senior developer advocate at Applitools and director at Test Automation University about her experience as a teacher. And she talks to us about her teaching and learning styles and shares some advice for those looking to get into the world of teaching. And this episode, we'll discuss things like how to teach to multiple skill levels and common misconceptions about being a teacher." 8 | episode: "Season 1 Episode 12" 9 | length: "38:31" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | 17 | LogRocket Website 18 | 19 | How many times have you struggled to figure out an annoying bug in your app? Well struggle no more! Log Rocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. You can see a perfect replay of what your users saw, inspect Redux actions and state at any point in time, view every network request and response, and even inspect console logs and JavaScript errors. Log Rocket lets you support your users without the tedious back and forth conversations. Plus it works with React, Angular, vanilla JavaScript, Redux, Ember, and Vue! Check out Log Rocket today to improve your debugging workflow. 20 | 21 | # Show notes 22 | 23 | **5:59** - What drew you into teaching? 24 | 25 | **7:47** - Did you ever have a memorable teacher? 26 | 27 | **13:40** - How do you teach to students with varying skill levels? 28 | 29 | **17:56** - What do you struggle with most when it comes to teaching? 30 | 31 | **23:41** - Do you think, as a developer advocate, that it’s important to know how to teach? 32 | 33 | **24:29** - What’s your teaching style && how do you appeal to different learning styles? 34 | 35 | **26:13** - What’s your favorite subject to teach? 36 | 37 | **27:25** - Who do you look up to in the industry? 38 | 39 | **29:52** - How do you learn? 40 | 41 | **33:42** - What advice would you give someone who wants to get into teaching? 42 | 43 | # Resources 44 | 45 | - [Angie's Twitter](https://twitter.com/techgirl1908) 46 | - [Angie's Website](http://angiejones.tech/) 47 | - [Test Automation University](https://testautomationu.applitools.com/instructors/angie_jones.html) 48 | - [Sarah Drasner](https://frontendmasters.com/teachers/sarah-drasner/) 49 | 50 | # Transcript 51 | 52 | We provide transcripts for all of our episodes. You can find them here! 53 | -------------------------------------------------------------------------------- /src/episodes/2019-09-30-design-systems/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Design Systems 3 | formattedDate: "September 30, 2019" 4 | date: "2019-09-30" 5 | audio: https://pinecast.com/listen/a3860cd5-e858-41b5-957b-43ac4cffd9f2.mp3 6 | path: "/design-systems" 7 | description: "Design systems are in the world around us from the signs on the side of the highway to the setup of a grocery store and our products are no exception. But what exactly our design systems and how do we build them? In this episode, we'll take a look at the foundations of design systems, the benefits and drawbacks, and the process for creating one from the ground up." 8 | episode: "Season 1 Episode 13" 9 | length: "39:48" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | 17 | LogRocket Website 18 | 19 | How many times have you struggled to figure out an annoying bug in your app? Well struggle no more! Log Rocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. You can see a perfect replay of what your users saw, inspect Redux actions and state at any point in time, view every network request and response, and even inspect console logs and JavaScript errors. Log Rocket lets you support your users without the tedious back and forth conversations. Plus it works with React, Angular, vanilla JavaScript, Redux, Ember, and Vue! Check out Log Rocket today to improve your debugging workflow. 20 | 21 | # Show notes 22 | 23 | **1:23** - What are design systems? 24 | 25 | **2:58** - Emma's experience with design systems 26 | 27 | **3:52** - Ali's experience with design systems 28 | 29 | **4:41** - Kelly's experience with design systems 30 | 31 | **5:00** - Do you need a design system and who are design systems for? 32 | 33 | **7:46** - Benefits of design systems 34 | 35 | **11:11** - Drawbacks of design systems and team structure 36 | 37 | **13:11** - How do you measure success? 38 | 39 | **14:24** - Challenges of building a design system 40 | 41 | **15:34** - How to build a design system 42 | 43 | **18:19** - Styling components 44 | 45 | **19:03** - Documentation tools 46 | 47 | **21:09** - Style guides 48 | 49 | **23:42** - Why design systems fail 50 | 51 | **25:08** - Who builds design systems 52 | 53 | **29:20** - Tools for building design systems 54 | 55 | **32:54** - Notable people in design systems 56 | 57 | **36:54** - Wins 58 | 59 | # Resources 60 | 61 | **Tools** 62 | 63 | - [Sketch](https://www.sketch.com/) 64 | - [Figma](https://www.figma.com/) 65 | - [Gatsby](https://www.gatsbyjs.org/) 66 | - [MDXJS](https://mdxjs.com/getting-started/gatsby) 67 | - [Invision DSM](https://www.invisionapp.com/design-system-manager) 68 | - [Framer X](https://www.framer.com/) 69 | - [Storybook](https://storybook.js.org/) 70 | - [Notion](https://www.notion.so/) 71 | - [Pattern Lab](https://patternlab.io/) 72 | 73 | **Design Systems** 74 | 75 | - [Shopify Polaris](https://polaris.shopify.com/) 76 | - [IBM Carbon](https://www.carbondesignsystem.com/) 77 | - [Google Material Design](https://material.io/design/) 78 | - [Atlassian Nachos](https://www.atlassian.design/) 79 | - [NASA Design System](https://nasa.github.io/nasawds-site/) 80 | - [Mailchimp](https://styleguide.mailchimp.com/) 81 | 82 | **Books & Articles** 83 | 84 | - [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) 85 | - [Documenting React Components With Storybook](https://medium.com/@**emma**wedekind/documenting-react-components-with-storybook-6c83abe7cb29) 86 | - [Design Systems Part 1 Foundations](https://dev.to/**emma**wedekind/design-systems-part-i-foundations-45hd) 87 | - [Design Systems Part 2 Design Language](https://dev.to/**emma**wedekind/design-systems-part-ii-design-language-217k) 88 | 89 | **People & Conferences** 90 | 91 | - [Brad Frost](https://bradfrost.com/) 92 | - [Nathan Curtis](https://medium.com/@nathanacurtis) 93 | - [Tatiana Mac System of Systems](https://slides.com/tatianamac/systems-of-systems) 94 | - [Clarity Conf](https://www.clarityconf.com/) 95 | 96 | # Transcript 97 | 98 | We provide transcripts for all of our episodes. You can find them here! 99 | -------------------------------------------------------------------------------- /src/episodes/2019-10-07-hacktoberfest-part-1/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | title: Hacktoberfest Part 1 4 | formattedDate: "October 7, 2019" 5 | date: "2019-10-07" 6 | audio: https://pinecast.com/listen/6d4a761e-1ea7-43e1-876a-62459871cdfc.mp3 7 | path: "/hacktoberfest-part-1" 8 | description: "October means it's time for Hacktoberfest. Hacktoberfest is an awesome event where you can get involved in open source whether it's your first time contributing or you're a seasoned pro. 9 | 10 | In this episode we'll discuss what Hacktoberfest is, how you can start contributing to open source, and with our special guests Peter and Jess from Dev, we'll talk about how you can maintain your own open source project." 11 | episode: "Season 1 Episode 14" 12 | length: "26:17" 13 | --- 14 | 15 | # Sponsors 16 | 17 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 18 | 19 | 20 | LogRocket Website 21 | 22 | How many times have you struggled to figure out an annoying bug in your app? Well struggle no more! Log Rocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. You can see a perfect replay of what your users saw, inspect Redux actions and state at any point in time, view every network request and response, and even inspect console logs and JavaScript errors. Log Rocket lets you support your users without the tedious back and forth conversations. Plus it works with React, Angular, vanilla JavaScript, Redux, Ember, and Vue! Check out Log Rocket today to improve your debugging workflow. 23 | 24 | 25 | Digital Ocean Website 26 | 27 | 28 | # Show Notes 29 | 30 | **1:57** - What is open source? 31 | 32 | **6:51** - What should a first time contributor look for? 33 | 34 | **8:12** - Do all open source projects participate? 35 | 36 | **8:52** - What advice would you give to a first time contributor? 37 | 38 | **16:03** - How did you convert Dev to open source? 39 | 40 | **23:45** - What are your favorite open source projects? 41 | 42 | # Resources 43 | 44 | - [Jess Lee's Twitter](https://twitter.com/jessleenyc) 45 | - [Peter Frank's Twitter](https://twitter.com/PeterKimFrank) 46 | - [Dev.to Platform](https://dev.to/) 47 | - [Hacktoberfest Website](https://hacktoberfest.digitalocean.com/) 48 | - [Hacktoberfest Twitter](https://twitter.com/hacktoberfest?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) 49 | 50 | # Transcript 51 | 52 | We provide transcripts for all of our episodes. You can find them here! 53 | -------------------------------------------------------------------------------- /src/episodes/2019-10-10-hacktoberfest-part-2/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hacktoberfest Part 2 3 | formattedDate: "October 10, 2019" 4 | date: "2019-10-10" 5 | audio: https://pinecast.com/listen/28b2e37e-8bd2-4844-b1c0-e8d9b70294ea.mp3 6 | path: "/hacktoberfest-part-2" 7 | description: "October means it's time for Hacktoberfest. We're talking with Shannon Crabill about what open source is, how to get involved with Hacktoberfest, and tips & tricks for maintaining open source projects." 8 | episode: "Season 1 Episode 15" 9 | length: "20:34" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | 17 | Digital Ocean Website 18 | 19 | 20 | # Show notes 21 | 22 | **1:17** - Who is Shannon? 23 | 24 | **4:19** - What is open source? 25 | 26 | **4:55** - How did you get involved in Hacktoberfest? 27 | 28 | **6:27** - What is it like to maintain an open source project? 29 | 30 | **7:35** - Tips && tricks for people wanting to work on maintaining an open source project 31 | 32 | **8:54** - How to contribute to Hacktoberfest projects? 33 | 34 | **11:51** - Advice for beginners getting started in open source 35 | 36 | **13:09** - How do you find projects to contribute to? 37 | 38 | **14:30** - Hard parts of open source 39 | 40 | **15:38** - Best parts of open source 41 | 42 | **16:52** - How to gain confidence to contribute 43 | 44 | **18:06** - Advice to someone beginning their coding journey 45 | 46 | # Resources 47 | 48 | - [Shannon Crabill's Twitter](https://twitter.com/shannon_crabill) 49 | - [Dev.to Platform](https://dev.to/) 50 | - [Hacktoberfest Website](https://hacktoberfest.digitalocean.com/) 51 | - [Hacktoberfest Twitter](https://twitter.com/hacktoberfest?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) 52 | 53 | # Transcript 54 | 55 | We provide transcripts for all of our episodes. You can find them here! 56 | -------------------------------------------------------------------------------- /src/episodes/2019-10-13-javascript-frameworks/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React, Vue, && Angular, OH MY! 3 | formattedDate: "October 13, 2019" 4 | date: "2019-10-13" 5 | audio: https://pinecast.com/listen/c5f1451d-f587-4498-aa4e-ede696129492.mp3 6 | path: "/javascript-frameworks" 7 | description: "You've probably heard about some of the JavaScript frameworks that dominate the front end ecosystem. And this week's podcast we'll be discussing the pros and cons of JavaScript frameworks, go into detail about React, Vue, and Angular, and discuss tools and resources for how you can get started with these frameworks." 8 | episode: "Season 1 Episode 16" 9 | length: "51:01" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | LogRocket 17 | 18 | How many times have you struggled to figure out an annoying bug in your app? Well struggle no more! Log Rocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. You can see a perfect replay of what your users saw, inspect Redux actions and state at any point in time, view every network request and response, and even inspect console logs and JavaScript errors. Log Rocket lets you support your users without the tedious back and forth conversations. Plus it works with React, Angular, vanilla JavaScript, Redux, Ember, and Vue! Check out Log Rocket today to improve your debugging workflow. 19 | 20 | # Show notes 21 | 22 | **1:04** - Difference between a library & a framework 23 | 24 | **4:37** - Do we even need a framework? 25 | 26 | **13:25** - Pros & cons of using frameworks 27 | 28 | **16:54** - Popularity of different frameworks 29 | 30 | **25:31** - React 31 | 32 | **34:14** - Vue.js 33 | 34 | **39:34** - Angular 35 | 36 | **44:23** - Which framework is right for me? 37 | 38 | **45:44** - Evolution & speed of frontend development 39 | 40 | **47:31** - Learning these frameworks 41 | 42 | # Resources 43 | 44 | - [React](https://reactjs.org/) 45 | - [Vue.js](https://vuejs.org/) 46 | - [Angular](https://angular.io/) 47 | - [Redux](https://redux.js.org/) 48 | - [Learn JavaScript & jQuery](http://javascriptbook.com/) 49 | - [Codecademy](https://www.codecademy.com/pro/membership?gclid=EAIaIQobChMIv9b45ZqZ5QIVTF8NCh3F4QjuEAAYASAAEgJ7MvD_BwE) 50 | - [JS Frameworks Popularity](https://www.jetbrains.com/lp/devecosystem-2019/javascript/?gclid=EAIaIQobChMInPuOmJuZ5QIVkZ6fCh11UQ3YEAAYASAAEgLnF_D_BwE&gclsrc=aw.ds) 51 | - [10 Best JavaScript frameworks to use in 2019](https://hackr.io/blog/10-best-javascript-frameworks-2019) 52 | - [History of frontend frameworks](https://blog.logrocket.com/history-of-frontend-frameworks/) 53 | - [Tyler McGinnis React Hooks Course](https://tylermcginnis.com/courses/react-hooks/) 54 | - [Pure React by Dave Ceddia](https://daveceddia.com/pure-react/) 55 | - [Introduction to Vue by Sarah Drasner](https://frontendmasters.com/workshops/vue/) 56 | - [Evan You](https://twitter.com/youyuxi) 57 | - [Wes Bos](https://wesbos.com/) 58 | 59 | # Particpate in Hacktoberfest! 60 | 61 | October means Hacktoberfest! We released two episodes ([Part 1](https://ladybug.dev/episode/hacktoberfest-part-1/) && [Part 2](https://ladybug.dev/episode/hacktoberfest-part-2/)) on Hacktoberfest last week and we're participating! If you see a bug on our website, feel free to open a PR with the fix, or check out some of the open/available issues [here](https://github.com/ladybug-podcast/ladybugpodcast/issues)! It's a great way to get your first open source contribution! 62 | 63 | # Transcript 64 | 65 | We provide transcripts for all of our episodes. You can find them here! 66 | -------------------------------------------------------------------------------- /src/episodes/2019-10-21-technical-portfolios/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: All About Technical Portfolios 3 | formattedDate: "October 21, 2019" 4 | date: "2019-10-21" 5 | audio: https://pinecast.com/listen/26845ef8-5a0b-433f-8388-ca028227ddf0.mp3 6 | path: "/technical-portfolios" 7 | description: "This week we're talking all things portfolios. What can a portfolio do for you? How can you build one? Do you even need a portfolio to be successful? This week we'll delve into the world of portfolios." 8 | episode: "Season 1 Episode 17" 9 | length: "31:33" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | JAMStack Conf Website 17 | 18 | Netlify is the premiere way to build and manage fast modern websites that run without the need for web servers. Deploy sites directly from Git to a worldwide application delivery network for the fastest possible performance. Netlify is built in continuous deployment automatically builds and deploys your site or app whenever you post to your Git repository. You can even attach deploy previews to your pull request and turn each branch into its own staging site. Use modern front end tools and static generators like React Gatsby or Vue and Nuxt. For the back end Netlify can automatically deploy AWS lambda functions right along the rest of your code. Simply set a folder and drop in your functions. Everything else is automatic. There's so much more! Automatic forms, identity management, and tools to manage and transform large images and media. Learn more about Netlify's powerful platform at Netlify.com/ladybug. 19 | 20 | # Show notes 21 | 22 | **1:16** - What is a technical portfolio? 23 | 24 | **8:13** - Do we have portfolios? 25 | 26 | **8:21** - Why would you want a portfolio? 27 | 28 | **17:06** - How do you build a portfolio as a backend developer? 29 | 30 | **18:11** - What can you put in your portfolio? 31 | 32 | **20:26** - What if I'm bad at design? 33 | 34 | **23:15** - What should developers focus on when building a portfolio? 35 | 36 | **25:24** - Fun portfolio examples 37 | 38 | **29:18** - Wins 39 | 40 | # Resources 41 | 42 | - [Wix](https://www.wix.com/freesitebuilder/hiker-create?utm_source=google&gclid=EAIaIQobChMIopCmx7Kr5QIVCh6tBh3X3gczEAAYASAAEgJoYfD_BwE&utm_campaign=195454540%5E10375167220&experiment_id=wix%5Ee%5E48420852700%5E1t1&utm_medium=cpc) 43 | - [Squarespace](https://www.squarespace.com/) 44 | - [Dribbble](https://dribbble.com/) 45 | - [Ben Halpern's Portfolio](http://benhalpern.com/) 46 | - [Julia Khusainova's Portfolio](http://julia.im/) 47 | - [Developer Portfolios](https://github.com/emmawedekind/developer-portfolios) 48 | 49 | # Transcript 50 | 51 | We provide transcripts for all of our episodes. You can find them here! 52 | -------------------------------------------------------------------------------- /src/episodes/2019-10-28-shopify-and-e-commerce/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Shopify & E-Commerce 3 | formattedDate: "October 28, 2019" 4 | date: "2019-10-28" 5 | audio: https://pinecast.com/listen/733fafc7-e735-4ad2-88c1-11a1bbb29d71.mp3 6 | path: "/shopify-and-e-commerce" 7 | description: "If you’ve ever seen Kelly’s Twitter account then you’ve probably heard of Shopify, an E-commerce platform that gives you everything you need to sell online. This week we’re talking to JML, CTO at Shopify, and we’re giving you all the details." 8 | episode: "Season 1 Episode 18" 9 | length: "34:56" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | JAMStack Conf Website 17 | 18 | Netlify is the premiere way to build and manage fast modern websites that run without the need for web servers. Deploy sites directly from Git to a worldwide application delivery network for the fastest possible performance. Netlify is built in continuous deployment automatically builds and deploys your site or app whenever you post to your Git repository. You can even attach deploy previews to your pull request and turn each branch into its own staging site. Use modern front end tools and static generators like React Gatsby or Vue and Nuxt. For the back end Netlify can automatically deploy AWS lambda functions right along the rest of your code. Simply set a folder and drop in your functions. Everything else is automatic. There's so much more! Automatic forms, identity management, and tools to manage and transform large images and media. Learn more about Netlify's powerful platform at Netlify.com/ladybug. 19 | 20 | # Show notes 21 | 22 | **1:05** - Who are you and what is your role at Shopify? 23 | 24 | **1:41** - What does a typical day at Shopify look like? 25 | 26 | **3:36** - What was your path in tech? 27 | 28 | **7:44** - What is Shopify & e-commerce in general? 29 | 30 | **12:41** - What makes Shopify different from competitors? 31 | 32 | **13:42** - Why should developers pay attention to Shopify? 33 | 34 | **22:09** - What are your favorite things that have been built by Shopify? 35 | 36 | **24:28** - How has Shopify's design system, Polaris, changed development? 37 | 38 | **30:06** - What tech stack do you recommend focusing on for new Shopify developers? 39 | 40 | **31:01** - What does the day in the life of a Shopify developer look like? 41 | 42 | # Resources 43 | 44 | - [Jean-Michel Lemieux's Twitter](https://twitter.com/jmwind?lang=en) 45 | - [Shopify Careers](https://www.shopify.com/careers) 46 | - [Shopify](https://www.shopify.com/) 47 | - [Shopify Polaris Design System](https://polaris.shopify.com/) 48 | 49 | # Transcript 50 | 51 | We provide transcripts for all of our episodes. You can find them here! 52 | -------------------------------------------------------------------------------- /src/episodes/2019-11-04-working-remotely/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Working Remotely 3 | formattedDate: "November 4, 2019" 4 | date: "2019-11-04" 5 | audio: https://pinecast.com/listen/cebc92aa-1b41-47fb-b901-74734a2fdc1b.mp3 6 | path: "/working-remotely" 7 | description: "In recent years, working remotely has become a more popular office perk not only among startups but enterprise businesses as well. Some companies even ONLY work remotely. In this week’s episode, we’ll discuss our experiences working remotely, the pros and cons from an employer and employee standpoint, and provide some advice on whether or not working remotely is a good fit for you." 8 | episode: "Season 1 Episode 19" 9 | length: "38:37" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | Recurse Center 17 | 18 | When’s the last time you worked on that side project you’re always thinking about? How much progress could you make if you had three months to work and learn in a room full of smart, friendly, intellectually curious programmers? 19 | 20 | If you’re thinking: “I could make a lot of progress!” you should check out the Recurse Center. 21 | 22 | The Recurse Center is like a writer’s retreat, but for programmers: There are no classes or teachers. You direct your own learning and time, and can explore what interests you in a supportive community of 1600 programmers from all over the world. 23 | 24 | Whether you’ve been programming for six months or 30 years, RC is for you. Maybe you want to recreate vintage computer art, make contributions to Rust, learn CS best practices or start developing a new programming language? Those are all things people have done at RC! 25 | 26 | You can attend a retreat in Brooklyn for one, six, or 12 weeks. RC is free for everyone, and offers living expense grants of up to \$7,000 to people from underrepresented groups. They have an integrated recruiting agency, and offer career support whether you’re looking for your first programming job or want to find a senior role at a great company. 27 | 28 | Learn more about RC and how to apply at: [www.recurse.com](www.recurse.com) 29 | 30 | # Show notes 31 | 32 | **1:36** - What does it mean to work remotely? 33 | 34 | **2:34** - What is our experience working remotely? 35 | 36 | **7:08** - Pros & cons 37 | 38 | **21:05** - What makes a successful remote work experience? 39 | 40 | **27:11** - Should you work remotely as your first job? 41 | 42 | **31:35** - Personality traits for a healthy remote work experience 43 | 44 | **33:31** - Tips for working remotely 45 | 46 | # Resources 47 | 48 | - [Tips for working remotely](https://changelog.com/posts/pro-tips-for-devs-working-at-home) 49 | 50 | # Transcript 51 | 52 | We provide transcripts for all of our episodes. You can find them here! 53 | -------------------------------------------------------------------------------- /src/episodes/2019-11-11-debugging/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Debugging 101 3 | formattedDate: "November 11, 2019" 4 | date: "2019-11-11" 5 | audio: https://pinecast.com/listen/4c0623a3-1287-4cff-9ba1-4ade89e5d35a.mp3 6 | path: "/debugging" 7 | description: "How often have you encountered a problem and struggled to figure out where to start? Or maybe you aren’t super familiar with the browser tools available to debug your JavaScript code. So today we’ve brought on a special guest, Rebecca Hill, to help us learn about the world of debugging." 8 | episode: "Season 1 Episode 20" 9 | length: "27:44" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | Shopify Careers 17 | 18 | Are you a developer looking for your next challenge? Meet Shopify. We’re on a mission to make commerce better for everyone - but we do things a bit differently. We don’t tell people how to solve problems - we give them the tools, trust, and autonomy to build new solutions. We don’t work alone - we leverage the diverse perspectives across our teams in everything we do. And we don’t have all the answers - we’re big enough to tackle problems at scale but small enough that we haven’t figured them all out. If you’re a builder at heart who wants to solve highly technical problems. If you want to take all of your life experiences and apply them to a blank canvas. Or if you want access to really powerful tools - Shopify is the place for you. Visit shopify.com/careers today. 19 | 20 | Recurse Center 21 | 22 | When’s the last time you worked on that side project you’re always thinking about? How much progress could you make if you had three months to work and learn in a room full of smart, friendly, intellectually curious programmers? 23 | 24 | If you’re thinking: “I could make a lot of progress!” you should check out the Recurse Center. 25 | 26 | The Recurse Center is like a writer’s retreat, but for programmers: There are no classes or teachers. You direct your own learning and time, and can explore what interests you in a supportive community of 1600 programmers from all over the world. 27 | 28 | Whether you’ve been programming for six months or 30 years, RC is for you. Maybe you want to recreate vintage computer art, make contributions to Rust, learn CS best practices or start developing a new programming language? Those are all things people have done at RC! 29 | 30 | You can attend a retreat in Brooklyn for one, six, or 12 weeks. RC is free for everyone, and offers living expense grants of up to \$7,000 to people from underrepresented groups. They have an integrated recruiting agency, and offer career support whether you’re looking for your first programming job or want to find a senior role at a great company. 31 | 32 | Learn more about RC and how to apply at: www.recurse.com 33 | 34 | # Show notes 35 | 36 | **1:12** - Who are you? 37 | 38 | **2:00** - How did you learn so much about debugging? 39 | 40 | **3:12** - Basic debugging steps 41 | 42 | **6:21** - Is debugging language agnostic? 43 | 44 | **9:36** - Why don't we teach debugging? 45 | 46 | **13:45** - Different types of debugging 47 | 48 | **17:09** - Common debugging mistakes 49 | 50 | **19:39** - Testing 51 | 52 | **20:50** - Browser features for debugging 53 | 54 | **22:40** - Tips for new developers 55 | 56 | **24:55** - Which browser is best for debugging? 57 | 58 | **26:08** - Where can you learn more? 59 | 60 | # Resources 61 | 62 | - [Essential JavaScript debugging tools for the modern detective by Rebecca Hill](https://www.youtube.com/watch?v=TtsvMRxmfGA) 63 | - [Rebecca Hill](https://twitter.com/rebekaka) 64 | - [Mindset by Carol Dweck](https://www.amazon.de/Mindset-Updated-Changing-Fulfil-Potential/dp/147213995X/ref=asc_df_147213995X/?tag=googshopde-21&linkCode=df0&hvadid=309205882077&hvpos=1o1&hvnetw=g&hvrand=8764043268399286259&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9041877&hvtargid=pla-453595936974&psc=1&th=1&psc=1&tag=&ref=&adgrpid=60093767645&hvpone=&hvptwo=&hvadid=309205882077&hvpos=1o1&hvnetw=g&hvrand=8764043268399286259&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9041877&hvtargid=pla-453595936974) 65 | - [Debugging in Chrome](https://developers.google.com/web/tools/chrome-devtools/javascript) 66 | - [Chrome Dev Tools](https://developers.google.com/web/tools/chrome-devtools) 67 | - [Debugging JavaScript in Firefox](https://www.jetbrains.com/help/webstorm/debugging-javascript-in-firefox.html) 68 | - [Debugging JavaScript](https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript) 69 | - [Chrome Developer](https://developer.chrome.com/home) 70 | - [Umaar Dev Tips](https://umaar.com/dev-tips/) 71 | 72 | # Transcript 73 | 74 | We provide transcripts for all of our episodes. You can find them here! 75 | -------------------------------------------------------------------------------- /src/episodes/2019-11-18-web-performance/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Web Performance 3 | formattedDate: "November 18, 2019" 4 | date: "2019-11-18" 5 | audio: https://pinecast.com/listen/0406aa83-fd62-4add-9b99-096d2b211047.mp3 6 | path: "/web-performance" 7 | description: "Today we’re talking about web performance. Did you know that 40% of users abandon sites that take more than 3s to load? Turns out making your sites fast is pretty important! In this episode we’ll talk about what web performance is, why we should care, and we’ll give you tips for optimizing performance and measuring it." 8 | episode: "Season 1 Episode 21" 9 | length: "32:59" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | Shopify Careers 17 | 18 | Are you a developer looking for your next challenge? Meet Shopify. We’re on a mission to make commerce better for everyone - but we do things a bit differently. We don’t tell people how to solve problems - we give them the tools, trust, and autonomy to build new solutions. We don’t work alone - we leverage the diverse perspectives across our teams in everything we do. And we don’t have all the answers - we’re big enough to tackle problems at scale but small enough that we haven’t figured them all out. If you’re a builder at heart who wants to solve highly technical problems. If you want to take all of your life experiences and apply them to a blank canvas. Or if you want access to really powerful tools - Shopify is the place for you. Visit shopify.com/careers today. 19 | 20 | Recurse Center 21 | 22 | When’s the last time you worked on that side project you’re always thinking about? How much progress could you make if you had three months to work and learn in a room full of smart, friendly, intellectually curious programmers? 23 | 24 | If you’re thinking: “I could make a lot of progress!” you should check out the Recurse Center. 25 | 26 | The Recurse Center is like a writer’s retreat, but for programmers: There are no classes or teachers. You direct your own learning and time, and can explore what interests you in a supportive community of 1600 programmers from all over the world. 27 | 28 | Whether you’ve been programming for six months or 30 years, RC is for you. Maybe you want to recreate vintage computer art, make contributions to Rust, learn CS best practices or start developing a new programming language? Those are all things people have done at RC! 29 | 30 | You can attend a retreat in Brooklyn for one, six, or 12 weeks. RC is free for everyone, and offers living expense grants of up to \$7,000 to people from underrepresented groups. They have an integrated recruiting agency, and offer career support whether you’re looking for your first programming job or want to find a senior role at a great company. 31 | 32 | Learn more about RC and how to apply at: www.recurse.com 33 | 34 | # Show notes 35 | 36 | **1:18** - What is web performance? 37 | 38 | **3:48** - Why should I care about performance? 39 | 40 | **6:59** - The cost of JavaScript 41 | 42 | **14:02** - What should I be measuring? 43 | 44 | **17:46** - Performance tools 45 | 46 | **19:40** - Performance-improving methods 47 | 48 | **26:49** - Progressive web apps 49 | 50 | # Resources 51 | 52 | - [Lighthouse](https://developers.google.com/web/tools/lighthouse) 53 | - [Gatsby](https://www.gatsbyjs.org/) 54 | 55 | # Transcript 56 | 57 | We provide transcripts for all of our episodes. You can find them here! 58 | -------------------------------------------------------------------------------- /src/episodes/2019-11-25-conference-talks/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Speaking At Conferences 3 | formattedDate: "November 25, 2019" 4 | date: "2019-11-25" 5 | audio: https://pinecast.com/listen/8f1cd208-c5b3-4f00-af18-5c38e3e7fb2a.mp3 6 | path: "/speaking-at-conferences" 7 | description: "Have you ever watched or attended a conference and been in awe of the speakers? How do they know so much information? How do they prepare a talk? How do they even get the courage to speak in the first place and what is that process like? In this episode we’ll delve into all things conference talks." 8 | episode: "Season 1 Episode 22" 9 | length: "49:05" 10 | --- 11 | 12 | # Sponsors 13 | 14 | A huge thank you to our sponsors for supporting the LadyBug Podcast! Interested in becoming a Ladybug Podcast sponsor? Head over to our Contact page for more details. 15 | 16 | Shopify Careers 17 | 18 | Are you a developer looking for your next challenge? Meet Shopify. We’re on a mission to make commerce better for everyone - but we do things a bit differently. We don’t tell people how to solve problems - we give them the tools, trust, and autonomy to build new solutions. We don’t work alone - we leverage the diverse perspectives across our teams in everything we do. And we don’t have all the answers - we’re big enough to tackle problems at scale but small enough that we haven’t figured them all out. If you’re a builder at heart who wants to solve highly technical problems. If you want to take all of your life experiences and apply them to a blank canvas. Or if you want access to really powerful tools - Shopify is the place for you. Visit shopify.com/careers today. 19 | 20 | # Show notes 21 | 22 | **1:31** - Our speaking experience 23 | 24 | **8:03** - What can I speak about? 25 | 26 | **11:51** - What is a CFP? 27 | 28 | **17:22** - Benefits of speaking 29 | 30 | **19:53** - Drawback of speaking 31 | 32 | **24:19** - Speaker fees 33 | 34 | **32:19** - Preparing your talk 35 | 36 | **39:27** - Speaking advice 37 | 38 | **46:04** - How do I get started? 39 | 40 | # Resources 41 | 42 | - [Speaking at technical conferences](https://dev.to/emmawedekind/speaking-at-technical-conferences-1kkk) 43 | - [Public Speaking as a Developer](https://dev.to/aspittel/public-speaking-as-a-developer-2ihj) 44 | - [All Things Open conference talks](https://www.youtube.com/channel/UCBhXFK70DbOU15N2BhDQVTg) 45 | - [Codeland conference](https://codelandconf.com/) 46 | - [GraphQL Day Bodensee](https://www.graphqlday.org/) 47 | - [React Live Amsterdam Live Coding A Portfolio With Gatsby](https://www.youtube.com/watch?v=_CuqXv-Won8) 48 | - [Building Effective Cross-Cultural Teams](https://www.smashingmagazine.com/smashing-tv/building-effective-cross-cultural-teams/) 49 | - [Developer Avocados Weekly](https://developeravocados.net/) 50 | - [Call For Papers Land](https://www.cfpland.com/) 51 | - [Paper Call](https://www.papercall.io/) 52 | - [Dan Abramov Preparing A Tech Talk](https://overreacted.io/preparing-for-tech-talk-part-1-motivation/) 53 | - [Demystifying Public Speaking](https://abookapart.com/products/demystifying-public-speaking) 54 | - [Talk Like Ted](https://www.amazon.de/dp/386881647X/ref=sr_1_1?hvadid=167071357579&hvdev=c&hvlocphy=9041727&hvnetw=g&hvpos=1t1&hvqmt=e&hvrand=9408760958512289183&hvtargid=kwd-300125744581&keywords=talk+like+ted&qid=1574612757&sr=8-1) 55 | - [Saron Yitbarek Your Perfect Tech Talk](https://www.youtube.com/watch?v=AzVr_nsKoZs) 56 | - [Reveal.js](https://github.com/hakimel/reveal.js/) 57 | - [Impress.js](https://github.com/impress/impress.js/) 58 | - [Slides.com](https://slides.com/) 59 | - [Google slides](https://www.google.com/slides/about/) 60 | - [Deckset](https://www.deckset.com/) 61 | - [Envato](https://envato.com/) 62 | - [Creative Market](https://creativemarket.com) 63 | - [Canva](https://www.canva.com) 64 | - [Ali's CFP GitHub](https://github.com/aspittel/cfps) 65 | 66 | # Transcript 67 | 68 | We provide transcripts for all of our episodes. You can find them here! 69 | -------------------------------------------------------------------------------- /src/images/books/habits.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ladybug-podcast/ladybugpodcast/4753c2637c52f4d67623bd49ea1e188b0e554912/src/images/books/habits.jpg -------------------------------------------------------------------------------- /src/images/books/invisible-women.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ladybug-podcast/ladybugpodcast/4753c2637c52f4d67623bd49ea1e188b0e554912/src/images/books/invisible-women.jpg -------------------------------------------------------------------------------- /src/images/books/it-doesnt-have-to-be-crazy-at-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ladybug-podcast/ladybugpodcast/4753c2637c52f4d67623bd49ea1e188b0e554912/src/images/books/it-doesnt-have-to-be-crazy-at-work.jpg -------------------------------------------------------------------------------- /src/images/brand/background.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 13 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/images/brand/ladybug.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ladybug 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /src/images/brand/ladybug@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ladybug-podcast/ladybugpodcast/4753c2637c52f4d67623bd49ea1e188b0e554912/src/images/brand/ladybug@2x.png -------------------------------------------------------------------------------- /src/images/brand/logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ladybug-podcast/ladybugpodcast/4753c2637c52f4d67623bd49ea1e188b0e554912/src/images/brand/logo@2x.png -------------------------------------------------------------------------------- /src/images/brand/page-header-background.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/images/footer/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | google 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/images/footer/itunes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | itunes 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/images/footer/podcast.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | podcast 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/images/footer/rss.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | rss 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/images/footer/spotify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | spotify 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/images/footer/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | twitter 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/images/nav/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | close 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/images/nav/menu-red.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | menu - red 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/images/nav/menu-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | menu - white 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/images/player/pause-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 6 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/images/player/play-button-red.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | play-button 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/images/player/play-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | play-button 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/images/sponsors/RC_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 54 | 58 | 62 | 65 | 67 | 73 | 77 | 81 | 85 | 88 | 90 | 95 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /src/images/sponsors/digitalocean.svg: -------------------------------------------------------------------------------- 1 | digitalocean -------------------------------------------------------------------------------- /src/images/sponsors/jamstack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/sponsors/logrocket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/images/sponsors/netlify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/images/sponsors/sanity.svg: -------------------------------------------------------------------------------- 1 | Sanity -------------------------------------------------------------------------------- /src/images/sponsors/shopify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 20 | 21 | 23 | 26 | 27 | 28 | 29 | 32 | 35 | 38 | 41 | 43 | 44 | 46 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/images/team/ali.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ladybug-podcast/ladybugpodcast/4753c2637c52f4d67623bd49ea1e188b0e554912/src/images/team/ali.jpg -------------------------------------------------------------------------------- /src/images/team/emma.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ladybug-podcast/ladybugpodcast/4753c2637c52f4d67623bd49ea1e188b0e554912/src/images/team/emma.jpg -------------------------------------------------------------------------------- /src/images/team/kelly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ladybug-podcast/ladybugpodcast/4753c2637c52f4d67623bd49ea1e188b0e554912/src/images/team/kelly.jpg -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import SEO from "../components/seo" 4 | 5 | const NotFoundPage = () => ( 6 |
7 | 8 |

NOT FOUND

9 |

You just hit a route that doesn't exist... the sadness.

10 |
11 | ) 12 | 13 | export default NotFoundPage 14 | -------------------------------------------------------------------------------- /src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import SEO from "../components/seo" 4 | import PageHeader from "../components/PageHeader" 5 | import TeamMemberBlock from "../components/TeamMemberBlock" 6 | // import Footer from "../components/Footer" 7 | import { kellyBio, emmaBio, aliBio } from "../data/bios" 8 | import "./pages.css" 9 | 10 | const AboutPage = ({ data }) => ( 11 |
12 | 13 | 14 | 15 |
16 |
17 |

About Us

18 |
19 | 27 | 35 | 43 |
44 | {/*
*/} 45 |
46 | ) 47 | 48 | export const Photos = graphql` 49 | { 50 | kelly: file(relativePath: { eq: "team/kelly.jpg" }) { 51 | childImageSharp { 52 | fixed(width: 200) { 53 | ...GatsbyImageSharpFixed 54 | } 55 | } 56 | } 57 | emma: file(relativePath: { eq: "team/emma.jpg" }) { 58 | childImageSharp { 59 | fixed(width: 200) { 60 | ...GatsbyImageSharpFixed 61 | } 62 | } 63 | } 64 | ali: file(relativePath: { eq: "team/ali.jpg" }) { 65 | childImageSharp { 66 | fixed(width: 200) { 67 | ...GatsbyImageSharpFixed 68 | } 69 | } 70 | } 71 | } 72 | ` 73 | 74 | export default AboutPage 75 | -------------------------------------------------------------------------------- /src/pages/books.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import Img from "gatsby-image" 4 | import SEO from "../components/seo" 5 | import PageHeader from "../components/PageHeader" 6 | // import Footer from "../components/Footer" 7 | import "./pages.css" 8 | 9 | const BooksPage = ({ data }) => ( 10 |
11 | 12 | 13 | 14 |
15 |
16 |

Book Club

17 |
18 |

19 | We've started a book club! Each month we'll be reading a popular 20 | non-fiction book and bringing you an extra episode to discuss our 21 | thoughts. 22 |

23 |

24 | If you'd like to follow along, feel free to join our{" "} 25 | 30 | Goodreads group 31 | 32 | . 33 |

34 |
35 |
36 |

January

37 | 38 |
39 |
40 |

February

41 | 42 |
43 |
44 |

March

45 | 46 |
47 |
48 |
49 | {/*
*/} 50 |
51 | ) 52 | 53 | export const AllBooksQuery = graphql` 54 | { 55 | atomicHabits: file(relativePath: { eq: "books/habits.jpg" }) { 56 | childImageSharp { 57 | fixed(width: 250) { 58 | ...GatsbyImageSharpFixed 59 | } 60 | } 61 | } 62 | invisibleWomen: file(relativePath: { eq: "books/invisible-women.jpg" }) { 63 | childImageSharp { 64 | fixed(width: 250) { 65 | ...GatsbyImageSharpFixed 66 | } 67 | } 68 | } 69 | itDoesntHaveToBeCrazyAtWork: file( 70 | relativePath: { eq: "books/it-doesnt-have-to-be-crazy-at-work.jpg" } 71 | ) { 72 | childImageSharp { 73 | fixed(width: 250) { 74 | ...GatsbyImageSharpFixed 75 | } 76 | } 77 | } 78 | } 79 | ` 80 | 81 | export default BooksPage 82 | -------------------------------------------------------------------------------- /src/pages/contact.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import SEO from "../components/seo" 3 | import PageHeader from "../components/PageHeader" 4 | // import Footer from "../components/Footer" 5 | import "./pages.css" 6 | 7 | const ContactPage = () => ( 8 |
9 | 10 | 11 | 12 |
13 |
14 |

Contact Us

15 |
16 |

Get In Touch

17 |

18 | Have some feedback or just want to get in touch? Feel free to send us a 19 | DM on{" "} 20 | 26 | Twitter 27 | {" "} 28 | or send an email to hello@ladybug.dev 29 | . 30 |

31 |

Sponsorships

32 |

33 | We're Emma Wedekind, Kelly Vaughn, and Ali Spittel - three seasoned 34 | software developers working in different sectors. We wanted to add our 35 | voices to the podcasting sphere and share our experiences and advice. We 36 | have great discussions around how to start coding, the hot technologies 37 | right now, how to get your first developer job, imposter syndrome, how 38 | to write CSS and more! 39 |

40 |

41 | Our podcast has been reaching a large audience of diverse developers 42 | from junior to senior and everything in between. According to Spotify's 43 | analytics, 35% of our listeners are women, far outpacing the industry. 44 |

45 |

46 | Our podcast is new, but growing fast. We hit the 35,000 listens mark a 47 | month after our first episode. Our first episode has reached 8,000 48 | listens before it was four weeks old. Each episode is passing the 5k 49 | listens mark one week after publication. The growth has been enormous, 50 | and we expect these numbers to keep climbing rapidly. 51 |

52 |

53 | Our episodes are released first thing each Monday morning, and are about 54 | both technical topics and career advice for other developers. 55 |

56 |

Sponsorship Pricing

57 |
    58 |
  • One $1,000 pre-roll slot
    • 59 |
  • Two $800 mid-roll slots
    • 60 |
61 |

What's Included

62 |
    63 |
  • A post-roll slot
    • 64 |
  • 65 | Your logo, link, and description on our website on the episode's page 66 |
    • 67 |
  • 68 | A link to your site within the show notes syndicated to podcast 69 | clients and our RSS feed 70 |
    • 71 |
72 |

Episode Format

73 |
    74 |
  • An introduction to what the episode is about
    • 75 |
  • Our jingle
    • 76 |
  • The pre-roll sponsor
    • 77 |
  • The first half of the episode
    • 78 |
  • Mid-roll sponsors
    • 79 |
  • The second half of the episode
    • 80 |
  • Post-roll shoutouts
    • 81 |
82 | 83 |

84 | We can customize your message in keeping with our tone and experiences, 85 | or deliver a script you send us. We do want to make sure we are excited 86 | about our sponsors, and we would love to participate in demos or even 87 | build sample apps ourselves if applicable and possible. 88 |

89 |

90 | We ask for a 3 episode minimum agreement for sponsorship so that you 91 | consistently reach our audience each week. 92 |

93 |

94 | Send us an email at hello@ladybug.dev{" "} 95 | with any questions or to sponsor the show! 96 |

97 |
98 | {/*
*/} 99 |
100 | ) 101 | 102 | export default ContactPage 103 | -------------------------------------------------------------------------------- /src/pages/episodes.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import SEO from "../components/seo" 4 | import PageHeader from "../components/PageHeader" 5 | import EpisodeBlock from "../components/EpisodeBlock" 6 | // import Footer from "../components/Footer" 7 | import "./pages.css" 8 | 9 | const EpisodesPage = ({ data }) => ( 10 |
11 | 12 | 13 | 14 |
15 |
16 |

Episodes

17 |
18 | {data.allMarkdownRemark.edges.map(post => { 19 | return ( 20 | 21 | ) 22 | })} 23 |
24 | {/*
*/} 25 |
26 | ) 27 | 28 | export const blogsQuery = graphql` 29 | query { 30 | allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { 31 | edges { 32 | node { 33 | frontmatter { 34 | path 35 | title 36 | formattedDate 37 | description 38 | episode 39 | length 40 | } 41 | } 42 | } 43 | } 44 | } 45 | ` 46 | 47 | export default EpisodesPage 48 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import SEO from "../components/seo" 4 | import HomeHeader from "../components/HomeHeader" 5 | import EpisodeBlock from "../components/EpisodeBlock" 6 | // import Footer from "../components/Footer" 7 | import "./pages.css" 8 | 9 | const IndexPage = ({ data }) => { 10 | return ( 11 |
12 | 13 | 14 |
15 |

Recent Episodes

16 | 17 | 18 | 19 |
20 | {/*
*/} 21 |
22 | ) 23 | } 24 | 25 | export const blogsQuery = graphql` 26 | query { 27 | allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { 28 | edges { 29 | node { 30 | frontmatter { 31 | path 32 | title 33 | formattedDate 34 | description 35 | episode 36 | length 37 | audio 38 | } 39 | } 40 | } 41 | } 42 | } 43 | ` 44 | 45 | export default IndexPage 46 | -------------------------------------------------------------------------------- /src/pages/pages.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | overflow-x: hidden; 6 | font-family: "Montserrat"; 7 | color: #3c2829; 8 | } 9 | 10 | h1, 11 | h2, 12 | h3 { 13 | position: relative; 14 | margin-bottom: 24px; 15 | margin-top: 80px; 16 | } 17 | 18 | p { 19 | line-height: 24px; 20 | } 21 | 22 | main { 23 | position: relative; 24 | top: -80px; 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | } 29 | 30 | main p, 31 | main li { 32 | max-width: 600px; 33 | line-height: 24px; 34 | } 35 | 36 | ul a, 37 | p a { 38 | text-decoration: none; 39 | color: #3c2829; 40 | border-bottom: 2px solid #3c2829; 41 | transition: color 0.1s linear, border 0.1s linear; 42 | } 43 | 44 | nav a { 45 | border-bottom: 2px solid transparent; 46 | transition: color 0.1s linear, border 0.1s linear; 47 | } 48 | 49 | ul a:hover, 50 | ul a:focus, 51 | p a:hover, 52 | p a:focus, 53 | nav a:hover, 54 | nav a:focus { 55 | color: #f05657; 56 | border-bottom: 2px solid #f05657; 57 | } 58 | 59 | ul { 60 | padding-left: 16px; 61 | } 62 | 63 | li { 64 | margin: 8px 0; 65 | } 66 | 67 | .home-main { 68 | margin-top: 40px; 69 | } 70 | 71 | .button { 72 | padding: 8px 28px; 73 | font-family: "Montserrat"; 74 | font-size: 1em; 75 | border-radius: 20px; 76 | border: none; 77 | background: white; 78 | box-shadow: 4px 4px #f05657; 79 | cursor: pointer; 80 | color: #f05657; 81 | transition: all 0.1s ease-out; 82 | margin-top: 24px; 83 | } 84 | 85 | .button:hover, 86 | .button:focus { 87 | transform: translate3d(3px, 3px, 0); 88 | box-shadow: none; 89 | } 90 | 91 | .button-border { 92 | border: 2px solid #f05657; 93 | } 94 | 95 | .page-flex-horizontal { 96 | display: flex; 97 | } 98 | 99 | .page-flex-vertical { 100 | display: flex; 101 | flex-direction: column; 102 | } 103 | 104 | .play-button-red { 105 | width: 40px; 106 | height: 40px; 107 | margin-right: 32px; 108 | } 109 | 110 | .page-banner { 111 | background: url("../images/brand/page-header-background.svg"); 112 | color: #fff; 113 | width: 50%; 114 | height: 160px; 115 | border-radius: 8px; 116 | display: flex; 117 | justify-content: center; 118 | align-items: center; 119 | } 120 | 121 | .page-banner > h1 { 122 | margin: 0; 123 | } 124 | 125 | .page-banner > h1::after { 126 | width: 0; 127 | height: 0; 128 | } 129 | 130 | .about-wrapper { 131 | display: flex; 132 | margin: 48px 0; 133 | } 134 | 135 | .about-content-wrapper { 136 | margin-left: 24px; 137 | } 138 | 139 | .about-content-wrapper a { 140 | color: #3c2829; 141 | text-decoration: none; 142 | border-bottom: 2px solid #3c2829; 143 | transition: border 0.1s linear, color 0.1s linear; 144 | } 145 | 146 | .about-content-wrapper a:hover, 147 | .about-content-wrapper a:focus { 148 | border-bottom: 2px solid #f05657; 149 | color: #f05657; 150 | } 151 | 152 | .about-image { 153 | width: 200px; 154 | height: 200px; 155 | border-radius: 8px; 156 | } 157 | 158 | .about-name { 159 | font-size: 32px; 160 | margin: 0 0 16px; 161 | } 162 | 163 | .about-name::after, 164 | .about-title::after { 165 | width: 0; 166 | height: 0; 167 | } 168 | 169 | .about-title { 170 | font-size: 24px; 171 | margin: 0 0 16px; 172 | } 173 | 174 | .about-location { 175 | font-size: 14px; 176 | text-transform: uppercase; 177 | } 178 | 179 | .bookshelf { 180 | display: flex; 181 | justify-content: space-around; 182 | width: 100vw; 183 | } 184 | 185 | .book { 186 | display: flex; 187 | flex-direction: column; 188 | align-items: center; 189 | } 190 | 191 | .header-full .logo-link:hover, 192 | .header-full .logo-link:focus { 193 | border-bottom: 0; 194 | } 195 | 196 | @media (max-width: 1000px) { 197 | .about-wrapper { 198 | flex-direction: column; 199 | align-items: center; 200 | } 201 | 202 | .about-image { 203 | margin-bottom: 24px; 204 | } 205 | } 206 | 207 | @media (max-width: 800px) { 208 | .bookshelf { 209 | flex-direction: column; 210 | } 211 | } 212 | 213 | @media (max-width: 700px) { 214 | main { 215 | top: 0; 216 | } 217 | .header-content-wrapper { 218 | flex-direction: column; 219 | } 220 | 221 | .page-banner { 222 | width: 100vw; 223 | left: 10%; 224 | height: 100px; 225 | font-size: 0.8em; 226 | } 227 | 228 | main { 229 | margin: 0 40px; 230 | } 231 | 232 | .home-main { 233 | margin: 40px; 234 | } 235 | } 236 | 237 | @media (max-width: 500px) { 238 | .about-name, 239 | .about-title, 240 | .about-location { 241 | text-align: center; 242 | } 243 | 244 | .about-content-wrapper a { 245 | margin-bottom: 16px; 246 | display: block; 247 | } 248 | } 249 | -------------------------------------------------------------------------------- /src/templates/episode.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link, graphql } from "gatsby" 3 | import PageHeader from "../components/PageHeader" 4 | // import Footer from "../components/Footer" 5 | import Player from "../components/Player" 6 | 7 | export default function Template({ data }) { 8 | const { 9 | title, 10 | description, 11 | formattedDate, 12 | episode, 13 | length, 14 | path, 15 | audio, 16 | } = data.markdownRemark.frontmatter 17 | const { html } = data.markdownRemark 18 | 19 | return ( 20 |
21 | 22 |
23 | 33 | 34 | 35 | 36 |

41 |

42 | {/*
44 | ) 45 | } 46 | 47 | export const postQuery = graphql` 48 | query BlogPostByPath($path: String!) { 49 | markdownRemark(frontmatter: { path: { eq: $path } }) { 50 | html 51 | frontmatter { 52 | path 53 | title 54 | formattedDate 55 | episode 56 | length 57 | description 58 | audio 59 | } 60 | } 61 | } 62 | ` 63 | --------------------------------------------------------------------------------