├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── package-lock.json ├── package.json ├── src ├── components │ ├── blogSquare.css │ ├── blogSquare.js │ ├── header.css │ ├── header.js │ ├── layout.css │ ├── layout.js │ ├── menu.css │ ├── menu.js │ ├── resumeSection.css │ ├── resumeSection.js │ ├── workItem.css │ └── workItem.js ├── documents │ └── purple-sketch.sketch ├── favicon.png ├── images │ ├── 2015.svg │ ├── 2017.svg │ ├── 2018.svg │ ├── back-arrow.svg │ ├── coding-coach.png │ ├── gatsby-icon.png │ ├── gotomeeting.png │ ├── home-graphic.svg │ ├── ibm-q-network.png │ ├── logo.svg │ ├── lopdp.png │ ├── planit.png │ ├── resume-purple.png │ ├── resume-turquoise.png │ └── woman-at-desk.svg ├── pages │ ├── 2018-09-01-six-mistakes-youre-making-as-a-beginner-web-developer │ │ └── index.md │ ├── 2018-09-06-how-to-build-a-captivating-presentation-using-html-css-and-js │ │ └── index.md │ ├── 2018-10-03-how-to-write-a-stand-out-techncial-resume │ │ └── index.md │ ├── 2018-10-16-how-to-combat-bias-in-the-tech-industry │ │ └── index.md │ ├── 2018-10-27-mentorship-in-the-tech-industry │ │ └── index.md │ ├── 2018-12-23-nineteen-tips-for-software-engineers-in-2019 │ │ └── index.md │ ├── 2018-12-25-five-books-which-will-improve-your-career │ │ └── index.md │ ├── 2018-12-25-five-mistakes-youre-making-in-your-technical-interviews │ │ └── index.md │ ├── 404.js │ ├── about.js │ ├── blog.js │ ├── index.js │ ├── resume-templates.js │ └── work.js └── templates │ └── blogPost.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | .cache 3 | node_modules 4 | yarn-error.log 5 | 6 | # Build directory 7 | /public 8 | .DS_Store 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /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 | Check it out: https://www.emmawedekind.com 2 | -------------------------------------------------------------------------------- /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 | module.exports = { 2 | pathPrefix: '/gatsby-blog', 3 | siteMetadata: { 4 | title: 'Emma Wedekind', 5 | }, 6 | plugins: [ 7 | 'gatsby-plugin-react-helmet', 8 | 'gatsby-plugin-catch-links', 9 | `gatsby-transformer-sharp`, 10 | `gatsby-plugin-sharp`, 11 | { 12 | resolve: 'gatsby-source-filesystem', 13 | options: { 14 | path: `${__dirname}/src/pages`, 15 | name: 'pages', 16 | }, 17 | }, 18 | { 19 | resolve: 'gatsby-source-filesystem', 20 | options: { 21 | path: `${__dirname}/src/images`, 22 | name: 'images', 23 | }, 24 | }, 25 | 'gatsby-transformer-remark', 26 | { 27 | resolve: `gatsby-plugin-manifest`, 28 | options: { 29 | name: 'gatsby-starter-default', 30 | short_name: 'starter', 31 | start_url: '/', 32 | background_color: '#663399', 33 | theme_color: '#663399', 34 | display: 'minimal-ui', 35 | logo: 'src/images/logo.svg', 36 | }, 37 | }, 38 | 'gatsby-plugin-offline', 39 | `gatsby-plugin-favicon`, 40 | ], 41 | } 42 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | exports.createPages = ({ boundActionCreators, graphql }) => { 4 | const { createPage } = boundActionCreators 5 | 6 | const postTemplate = path.resolve('src/templates/blogPost.js') 7 | 8 | return graphql(` 9 | { 10 | allMarkdownRemark { 11 | edges { 12 | node { 13 | html 14 | id 15 | frontmatter { 16 | path 17 | title 18 | date 19 | author 20 | } 21 | } 22 | } 23 | } 24 | } 25 | `).then(res => { 26 | if (res.errors) { 27 | return Promise.reject(res.errors) 28 | } 29 | 30 | res.data.allMarkdownRemark.edges.forEach(({ node }) => { 31 | createPage({ 32 | path: node.frontmatter.path, 33 | component: postTemplate, 34 | }) 35 | }) 36 | }) 37 | } -------------------------------------------------------------------------------- /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": "gatsby-starter-default", 3 | "description": "Gatsby default starter", 4 | "version": "1.0.0", 5 | "author": "Kyle Mathews ", 6 | "dependencies": { 7 | "gatsby": "^2.0.93", 8 | "gatsby-cli": "^2.4.4", 9 | "gatsby-image": "^2.0.25", 10 | "gatsby-plugin-catch-links": "^2.0.4", 11 | "gatsby-plugin-favicon": "^3.1.4", 12 | "gatsby-plugin-manifest": "^2.0.5", 13 | "gatsby-plugin-offline": "^2.0.5", 14 | "gatsby-plugin-react-helmet": "^3.0.0", 15 | "gatsby-plugin-sharp": "^2.0.17", 16 | "gatsby-source-filesystem": "^2.0.3", 17 | "gatsby-transformer-remark": "^2.1.7", 18 | "gatsby-transformer-sharp": "^2.1.10", 19 | "react": "^16.5.1", 20 | "react-dom": "^16.5.1", 21 | "react-helmet": "^5.2.0" 22 | }, 23 | "keywords": [ 24 | "gatsby" 25 | ], 26 | "license": "MIT", 27 | "scripts": { 28 | "build": "gatsby build", 29 | "deploy": "gatsby build --prefix-paths && gh-pages -d public", 30 | "develop": "gatsby develop", 31 | "format": "prettier --write '**/*.js'", 32 | "test": "echo \"Error: no test specified\" && exit 1" 33 | }, 34 | "devDependencies": { 35 | "gh-pages": "^2.0.1", 36 | "prettier": "^1.14.2" 37 | }, 38 | "repository": { 39 | "type": "git", 40 | "url": "https://github.com/gatsbyjs/gatsby-starter-default" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/blogSquare.css: -------------------------------------------------------------------------------- 1 | .blogSquare { 2 | position: relative; 3 | display: flex; 4 | margin-bottom: 50px; 5 | flex-direction: column; 6 | padding-bottom: 50px; 7 | border-bottom: 1px solid #efefef; 8 | } 9 | 10 | .blogSquare__title { 11 | font-weight: 200; 12 | margin: 0; 13 | font-size: 1.5em; 14 | } 15 | 16 | .blogSquare__date { 17 | margin: 5px 0px 15px; 18 | font-size: 0.8em; 19 | font-weight: bold; 20 | } 21 | 22 | .blogSquare__readMore { 23 | font-size: 0.8em; 24 | display: inline-block; 25 | } 26 | -------------------------------------------------------------------------------- /src/components/blogSquare.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { Link } from 'gatsby' 4 | 5 | import './blogSquare.css' 6 | 7 | const BlogSquare = ({ title, date, path, description }) => ( 8 |
9 | 12 |

{title}

13 |

{date}

14 |

{description}

15 |

Read more

16 | 17 |
18 | ) 19 | 20 | export default BlogSquare 21 | -------------------------------------------------------------------------------- /src/components/header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | margin-bottom: 0; 3 | padding: 20px 20px 0px; 4 | display: flex; 5 | justify-content: space-between; 6 | overflow: hidden; 7 | align-items: center; 8 | flex-direction: column; 9 | } 10 | 11 | .header__link { 12 | color: white; 13 | text-decoration: none; 14 | } 15 | 16 | .header__logo { 17 | margin-bottom: 0; 18 | } 19 | 20 | @media (min-width: 790px) { 21 | .header { 22 | flex-direction: row; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | 4 | import Menu from './menu' 5 | import logo from '../images/logo.svg' 6 | 7 | import './header.css' 8 | 9 | const Header = ({ siteTitle }) => ( 10 |
11 | 12 | Logo 13 | 14 | 15 |
16 | ) 17 | 18 | export default Header 19 | -------------------------------------------------------------------------------- /src/components/layout.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | -ms-text-size-adjust: 100%; 4 | -webkit-text-size-adjust: 100%; 5 | } 6 | body { 7 | margin: 0; 8 | } 9 | article, 10 | aside, 11 | details, 12 | figcaption, 13 | figure, 14 | footer, 15 | header, 16 | main, 17 | menu, 18 | nav, 19 | section, 20 | summary { 21 | display: block; 22 | } 23 | audio, 24 | canvas, 25 | progress, 26 | video { 27 | display: inline-block; 28 | } 29 | audio:not([controls]) { 30 | display: none; 31 | height: 0; 32 | } 33 | progress { 34 | vertical-align: baseline; 35 | } 36 | [hidden], 37 | template { 38 | display: none; 39 | } 40 | a { 41 | background-color: transparent; 42 | -webkit-text-decoration-skip: objects; 43 | color: #333; 44 | text-decoration: none; 45 | } 46 | a:active, 47 | a:hover { 48 | outline-width: 0; 49 | } 50 | abbr[title] { 51 | border-bottom: none; 52 | text-decoration: underline; 53 | text-decoration: underline dotted; 54 | } 55 | b, 56 | strong { 57 | font-weight: inherit; 58 | font-weight: bolder; 59 | } 60 | dfn { 61 | font-style: italic; 62 | } 63 | h1 { 64 | font-size: 2em; 65 | margin: 0.67em 0; 66 | } 67 | mark { 68 | background-color: #ff0; 69 | color: #000; 70 | } 71 | small { 72 | font-size: 80%; 73 | } 74 | sub, 75 | sup { 76 | font-size: 75%; 77 | line-height: 0; 78 | position: relative; 79 | vertical-align: baseline; 80 | } 81 | sub { 82 | bottom: -0.25em; 83 | } 84 | sup { 85 | top: -0.5em; 86 | } 87 | img { 88 | border-style: none; 89 | } 90 | svg:not(:root) { 91 | overflow: hidden; 92 | } 93 | code, 94 | kbd, 95 | pre, 96 | samp { 97 | font-family: monospace, monospace; 98 | font-size: 1em; 99 | } 100 | figure { 101 | margin: 1em 40px; 102 | } 103 | hr { 104 | box-sizing: content-box; 105 | height: 0; 106 | overflow: visible; 107 | } 108 | button, 109 | input, 110 | optgroup, 111 | select, 112 | textarea { 113 | font: inherit; 114 | margin: 0; 115 | } 116 | optgroup { 117 | font-weight: 700; 118 | } 119 | button, 120 | input { 121 | overflow: visible; 122 | } 123 | button, 124 | select { 125 | text-transform: none; 126 | } 127 | [type='reset'], 128 | [type='submit'], 129 | button, 130 | html [type='button'] { 131 | -webkit-appearance: button; 132 | } 133 | [type='button']::-moz-focus-inner, 134 | [type='reset']::-moz-focus-inner, 135 | [type='submit']::-moz-focus-inner, 136 | button::-moz-focus-inner { 137 | border-style: none; 138 | padding: 0; 139 | } 140 | [type='button']:-moz-focusring, 141 | [type='reset']:-moz-focusring, 142 | [type='submit']:-moz-focusring, 143 | button:-moz-focusring { 144 | outline: 1px dotted ButtonText; 145 | } 146 | fieldset { 147 | border: 1px solid silver; 148 | margin: 0 2px; 149 | padding: 0.35em 0.625em 0.75em; 150 | } 151 | legend { 152 | box-sizing: border-box; 153 | color: inherit; 154 | display: table; 155 | max-width: 100%; 156 | padding: 0; 157 | white-space: normal; 158 | } 159 | textarea { 160 | overflow: auto; 161 | } 162 | [type='checkbox'], 163 | [type='radio'] { 164 | box-sizing: border-box; 165 | padding: 0; 166 | } 167 | [type='number']::-webkit-inner-spin-button, 168 | [type='number']::-webkit-outer-spin-button { 169 | height: auto; 170 | } 171 | [type='search'] { 172 | -webkit-appearance: textfield; 173 | outline-offset: -2px; 174 | } 175 | [type='search']::-webkit-search-cancel-button, 176 | [type='search']::-webkit-search-decoration { 177 | -webkit-appearance: none; 178 | } 179 | ::-webkit-input-placeholder { 180 | color: inherit; 181 | opacity: 0.54; 182 | } 183 | ::-webkit-file-upload-button { 184 | -webkit-appearance: button; 185 | font: inherit; 186 | } 187 | html { 188 | font: 112.5%/1.45em georgia, serif; 189 | box-sizing: border-box; 190 | overflow-y: scroll; 191 | } 192 | * { 193 | box-sizing: inherit; 194 | } 195 | *:before { 196 | box-sizing: inherit; 197 | } 198 | *:after { 199 | box-sizing: inherit; 200 | } 201 | body { 202 | color: hsla(0, 0%, 0%, 0.8); 203 | font-family: georgia, serif; 204 | font-weight: normal; 205 | word-wrap: break-word; 206 | font-kerning: normal; 207 | -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 208 | -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 209 | -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 210 | font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 211 | } 212 | img { 213 | max-width: 100%; 214 | margin-left: 0; 215 | margin-right: 0; 216 | margin-top: 0; 217 | padding-bottom: 0; 218 | padding-left: 0; 219 | padding-right: 0; 220 | padding-top: 0; 221 | margin-bottom: 1.45rem; 222 | } 223 | h1 { 224 | margin-left: 0; 225 | margin-right: 0; 226 | margin-top: 0; 227 | padding-bottom: 0; 228 | padding-left: 0; 229 | padding-right: 0; 230 | padding-top: 0; 231 | margin-bottom: 1.45rem; 232 | color: inherit; 233 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 234 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 235 | font-weight: bold; 236 | text-rendering: optimizeLegibility; 237 | font-size: 2.25rem; 238 | line-height: 1.1; 239 | } 240 | h2 { 241 | margin-left: 0; 242 | margin-right: 0; 243 | margin-top: 0; 244 | padding-bottom: 0; 245 | padding-left: 0; 246 | padding-right: 0; 247 | padding-top: 0; 248 | margin-bottom: 1.45rem; 249 | color: inherit; 250 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 251 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 252 | font-weight: bold; 253 | text-rendering: optimizeLegibility; 254 | font-size: 1.62671rem; 255 | line-height: 1.1; 256 | } 257 | h3 { 258 | margin-left: 0; 259 | margin-right: 0; 260 | margin-top: 0; 261 | padding-bottom: 0; 262 | padding-left: 0; 263 | padding-right: 0; 264 | padding-top: 0; 265 | margin-bottom: 1.45rem; 266 | color: inherit; 267 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 268 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 269 | font-weight: bold; 270 | text-rendering: optimizeLegibility; 271 | font-size: 1.38316rem; 272 | line-height: 1.1; 273 | } 274 | h4 { 275 | margin-left: 0; 276 | margin-right: 0; 277 | margin-top: 0; 278 | padding-bottom: 0; 279 | padding-left: 0; 280 | padding-right: 0; 281 | padding-top: 0; 282 | margin-bottom: 1.45rem; 283 | color: inherit; 284 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 285 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 286 | font-weight: bold; 287 | text-rendering: optimizeLegibility; 288 | font-size: 1rem; 289 | line-height: 1.1; 290 | } 291 | h5 { 292 | margin-left: 0; 293 | margin-right: 0; 294 | margin-top: 0; 295 | padding-bottom: 0; 296 | padding-left: 0; 297 | padding-right: 0; 298 | padding-top: 0; 299 | margin-bottom: 1.45rem; 300 | color: inherit; 301 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 302 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 303 | font-weight: bold; 304 | text-rendering: optimizeLegibility; 305 | font-size: 0.85028rem; 306 | line-height: 1.1; 307 | } 308 | h6 { 309 | margin-left: 0; 310 | margin-right: 0; 311 | margin-top: 0; 312 | padding-bottom: 0; 313 | padding-left: 0; 314 | padding-right: 0; 315 | padding-top: 0; 316 | margin-bottom: 1.45rem; 317 | color: inherit; 318 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 319 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 320 | font-weight: bold; 321 | text-rendering: optimizeLegibility; 322 | font-size: 0.78405rem; 323 | line-height: 1.1; 324 | } 325 | hgroup { 326 | margin-left: 0; 327 | margin-right: 0; 328 | margin-top: 0; 329 | padding-bottom: 0; 330 | padding-left: 0; 331 | padding-right: 0; 332 | padding-top: 0; 333 | margin-bottom: 1.45rem; 334 | } 335 | ul { 336 | margin-left: 1.45rem; 337 | margin-right: 0; 338 | margin-top: 0; 339 | padding-bottom: 0; 340 | padding-left: 0; 341 | padding-right: 0; 342 | padding-top: 0; 343 | margin-bottom: 1.45rem; 344 | list-style-position: outside; 345 | list-style-image: none; 346 | } 347 | ol { 348 | margin-left: 1.45rem; 349 | margin-right: 0; 350 | margin-top: 0; 351 | padding-bottom: 0; 352 | padding-left: 0; 353 | padding-right: 0; 354 | padding-top: 0; 355 | margin-bottom: 1.45rem; 356 | list-style-position: outside; 357 | list-style-image: none; 358 | } 359 | dl { 360 | margin-left: 0; 361 | margin-right: 0; 362 | margin-top: 0; 363 | padding-bottom: 0; 364 | padding-left: 0; 365 | padding-right: 0; 366 | padding-top: 0; 367 | margin-bottom: 1.45rem; 368 | } 369 | dd { 370 | margin-left: 0; 371 | margin-right: 0; 372 | margin-top: 0; 373 | padding-bottom: 0; 374 | padding-left: 0; 375 | padding-right: 0; 376 | padding-top: 0; 377 | margin-bottom: 1.45rem; 378 | } 379 | p { 380 | margin-left: 0; 381 | margin-right: 0; 382 | margin-top: 0; 383 | padding-bottom: 0; 384 | padding-left: 0; 385 | padding-right: 0; 386 | padding-top: 0; 387 | margin-bottom: 1.45rem; 388 | } 389 | figure { 390 | margin-left: 0; 391 | margin-right: 0; 392 | margin-top: 0; 393 | padding-bottom: 0; 394 | padding-left: 0; 395 | padding-right: 0; 396 | padding-top: 0; 397 | margin-bottom: 1.45rem; 398 | } 399 | pre { 400 | margin-left: 0; 401 | margin-right: 0; 402 | margin-top: 0; 403 | padding-bottom: 0; 404 | padding-left: 0; 405 | padding-right: 0; 406 | padding-top: 0; 407 | margin-bottom: 1.45rem; 408 | font-size: 0.85rem; 409 | line-height: 1.42; 410 | background: hsla(0, 0%, 0%, 0.04); 411 | border-radius: 3px; 412 | overflow: auto; 413 | word-wrap: normal; 414 | padding: 1.45rem; 415 | } 416 | table { 417 | margin-left: 0; 418 | margin-right: 0; 419 | margin-top: 0; 420 | padding-bottom: 0; 421 | padding-left: 0; 422 | padding-right: 0; 423 | padding-top: 0; 424 | margin-bottom: 1.45rem; 425 | font-size: 1rem; 426 | line-height: 1.45rem; 427 | border-collapse: collapse; 428 | width: 100%; 429 | } 430 | fieldset { 431 | margin-left: 0; 432 | margin-right: 0; 433 | margin-top: 0; 434 | padding-bottom: 0; 435 | padding-left: 0; 436 | padding-right: 0; 437 | padding-top: 0; 438 | margin-bottom: 1.45rem; 439 | } 440 | blockquote { 441 | margin-left: 1.45rem; 442 | margin-right: 1.45rem; 443 | margin-top: 0; 444 | padding-bottom: 0; 445 | padding-left: 0; 446 | padding-right: 0; 447 | padding-top: 0; 448 | margin-bottom: 1.45rem; 449 | } 450 | form { 451 | margin-left: 0; 452 | margin-right: 0; 453 | margin-top: 0; 454 | padding-bottom: 0; 455 | padding-left: 0; 456 | padding-right: 0; 457 | padding-top: 0; 458 | margin-bottom: 1.45rem; 459 | } 460 | noscript { 461 | margin-left: 0; 462 | margin-right: 0; 463 | margin-top: 0; 464 | padding-bottom: 0; 465 | padding-left: 0; 466 | padding-right: 0; 467 | padding-top: 0; 468 | margin-bottom: 1.45rem; 469 | } 470 | iframe { 471 | margin-left: 0; 472 | margin-right: 0; 473 | margin-top: 0; 474 | padding-bottom: 0; 475 | padding-left: 0; 476 | padding-right: 0; 477 | padding-top: 0; 478 | margin-bottom: 1.45rem; 479 | } 480 | hr { 481 | margin-left: 0; 482 | margin-right: 0; 483 | margin-top: 0; 484 | padding-bottom: 0; 485 | padding-left: 0; 486 | padding-right: 0; 487 | padding-top: 0; 488 | margin-bottom: calc(1.45rem - 1px); 489 | background: hsla(0, 0%, 0%, 0.2); 490 | border: none; 491 | height: 1px; 492 | } 493 | address { 494 | margin-left: 0; 495 | margin-right: 0; 496 | margin-top: 0; 497 | padding-bottom: 0; 498 | padding-left: 0; 499 | padding-right: 0; 500 | padding-top: 0; 501 | margin-bottom: 1.45rem; 502 | } 503 | b { 504 | font-weight: bold; 505 | } 506 | strong { 507 | font-weight: bold; 508 | } 509 | dt { 510 | font-weight: bold; 511 | } 512 | th { 513 | font-weight: bold; 514 | } 515 | li { 516 | margin-bottom: calc(1.45rem / 2); 517 | } 518 | ol li { 519 | padding-left: 0; 520 | } 521 | li > ol { 522 | margin-left: 1.45rem; 523 | margin-bottom: calc(1.45rem / 2); 524 | margin-top: calc(1.45rem / 2); 525 | } 526 | li > ul { 527 | margin-left: 1.45rem; 528 | margin-bottom: calc(1.45rem / 2); 529 | margin-top: calc(1.45rem / 2); 530 | } 531 | blockquote *:last-child { 532 | margin-bottom: 0; 533 | } 534 | li *:last-child { 535 | margin-bottom: 0; 536 | } 537 | p *:last-child { 538 | margin-bottom: 0; 539 | } 540 | li > p { 541 | margin-bottom: calc(1.45rem / 2); 542 | } 543 | code { 544 | font-size: 0.85rem; 545 | line-height: 1.45rem; 546 | } 547 | kbd { 548 | font-size: 0.85rem; 549 | line-height: 1.45rem; 550 | } 551 | samp { 552 | font-size: 0.85rem; 553 | line-height: 1.45rem; 554 | } 555 | abbr { 556 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 557 | cursor: help; 558 | } 559 | acronym { 560 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 561 | cursor: help; 562 | } 563 | abbr[title] { 564 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 565 | cursor: help; 566 | text-decoration: none; 567 | } 568 | thead { 569 | text-align: left; 570 | } 571 | td, 572 | th { 573 | text-align: left; 574 | border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); 575 | font-feature-settings: 'tnum'; 576 | -moz-font-feature-settings: 'tnum'; 577 | -ms-font-feature-settings: 'tnum'; 578 | -webkit-font-feature-settings: 'tnum'; 579 | padding-left: 0.96667rem; 580 | padding-right: 0.96667rem; 581 | padding-top: 0.725rem; 582 | padding-bottom: calc(0.725rem - 1px); 583 | } 584 | th:first-child, 585 | td:first-child { 586 | padding-left: 0; 587 | } 588 | th:last-child, 589 | td:last-child { 590 | padding-right: 0; 591 | } 592 | tt, 593 | code { 594 | background-color: hsla(0, 0%, 0%, 0.04); 595 | border-radius: 3px; 596 | font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono', 597 | 'Liberation Mono', Menlo, Courier, monospace; 598 | padding: 0; 599 | padding-top: 0.2em; 600 | padding-bottom: 0.2em; 601 | } 602 | pre code { 603 | background: none; 604 | line-height: 1.42; 605 | } 606 | code:before, 607 | code:after, 608 | tt:before, 609 | tt:after { 610 | letter-spacing: -0.2em; 611 | content: ' '; 612 | } 613 | pre code:before, 614 | pre code:after, 615 | pre tt:before, 616 | pre tt:after { 617 | content: ''; 618 | } 619 | @media only screen and (max-width: 480px) { 620 | html { 621 | font-size: 100%; 622 | } 623 | } 624 | 625 | * { 626 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, 627 | Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 628 | color: #4a4a4a; 629 | line-height: 1.8; 630 | } 631 | 632 | hr { 633 | background-color: #f7c0ab; 634 | margin: 50px 0px; 635 | } 636 | 637 | li { 638 | margin: 10px 0px; 639 | padding: 0; 640 | } 641 | 642 | a { 643 | text-decoration: underline; 644 | } 645 | -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Helmet from 'react-helmet' 4 | import { StaticQuery, graphql } from 'gatsby' 5 | 6 | import Header from './header' 7 | import './layout.css' 8 | 9 | const Layout = ({ children }) => ( 10 | ( 21 | <> 22 | 29 | 30 | 31 |
32 |
40 | {children} 41 |
42 | 43 | )} 44 | /> 45 | ) 46 | 47 | Layout.propTypes = { 48 | children: PropTypes.node.isRequired, 49 | } 50 | 51 | export default Layout 52 | -------------------------------------------------------------------------------- /src/components/menu.css: -------------------------------------------------------------------------------- 1 | li { 2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, 3 | Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 4 | padding: 15px 0px 15px 30px; 5 | } 6 | 7 | .menu { 8 | height: 100%; 9 | list-style: none; 10 | margin: 0; 11 | display: flex; 12 | font-size: 0.9em; 13 | } 14 | 15 | .menu__content-wrapper { 16 | position: relative; 17 | height: 100%; 18 | } 19 | 20 | .menu__item { 21 | color: #9fa7a7; 22 | text-decoration: none; 23 | } 24 | 25 | .menu__item--selected { 26 | text-decoration: underline; 27 | color: #f7c0ab; 28 | } 29 | 30 | .menu__button { 31 | background: none; 32 | border: none; 33 | } 34 | 35 | .menu > li { 36 | margin: 10px 0px; 37 | padding: 0px 20px; 38 | } 39 | -------------------------------------------------------------------------------- /src/components/menu.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | 4 | import './menu.css' 5 | 6 | const Menu = () => { 7 | return ( 8 |
9 |
    10 |
  • 11 | 16 | home 17 | 18 |
    • 19 |
  • 20 | 25 | about 26 | 27 |
    • 28 |
  • 29 | 34 | work 35 | 36 |
    • 37 |
  • 38 | 43 | blog 44 | 45 |
    • 46 |
  • 47 | 52 | resume templates 53 | 54 |
    • 55 |
56 |
57 | ) 58 | } 59 | 60 | export default Menu 61 | -------------------------------------------------------------------------------- /src/components/resumeSection.css: -------------------------------------------------------------------------------- 1 | .resumeSection { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | padding-bottom: 100px; 7 | margin-bottom: 100px; 8 | border-bottom: 1px solid #f7c0ab; 9 | } 10 | 11 | .resumeSection__image { 12 | width: 80vw; 13 | } 14 | 15 | .button { 16 | width: 150px; 17 | height: 40px; 18 | font-size: .8em; 19 | background: #f7c0ab; 20 | color: white; 21 | border: 2px solid #f7c0ab; 22 | font-weight: 100; 23 | margin-top: 30px; 24 | transition: all .1s linear; 25 | } 26 | 27 | .button:hover { 28 | cursor: pointer; 29 | background: none; 30 | color: #f7c0ab; 31 | } 32 | 33 | @media(min-width: 820px) { 34 | .resumeSection__image { 35 | max-width: 500px; 36 | } 37 | } -------------------------------------------------------------------------------- /src/components/resumeSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Img from 'gatsby-image' 3 | 4 | import './resumeSection.css' 5 | 6 | const ResumeSection = ({ image, title, link }) => ( 7 |
8 | {title} 13 | 14 | 15 | 16 |
17 | ) 18 | 19 | export default ResumeSection 20 | -------------------------------------------------------------------------------- /src/components/workItem.css: -------------------------------------------------------------------------------- 1 | .workItem__subtitle { 2 | color: #F7C0AB; 3 | font-weight: 300; 4 | margin: 0 0 10px; 5 | } 6 | 7 | .workItem__link { 8 | color: #9B9B9B; 9 | font-size: .9em; 10 | padding-bottom: 2px; 11 | } 12 | 13 | .workItem__link:hover, 14 | .workItem__link:focus { 15 | text-decoration: underline; 16 | } -------------------------------------------------------------------------------- /src/components/workItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Img from 'gatsby-image' 3 | 4 | import './workItem.css' 5 | 6 | const WorkItem = (({ image, title, date, tech, goal, link }) => ( 7 |
8 | {title} 9 |
10 |

{title}

11 |

{date}

12 |

Technology

13 |

{tech}

14 |

Goal

15 |

{goal}

16 | Check it out 17 |
18 |
19 | )); 20 | 21 | export default WorkItem -------------------------------------------------------------------------------- /src/documents/purple-sketch.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emmabostian/gatsby-blog/b748b0c1add4960eea9e6eda662ff90c9cd1c0ed/src/documents/purple-sketch.sketch -------------------------------------------------------------------------------- /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emmabostian/gatsby-blog/b748b0c1add4960eea9e6eda662ff90c9cd1c0ed/src/favicon.png -------------------------------------------------------------------------------- /src/images/2015.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 2015 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/images/2017.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 2017 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/images/2018.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 2018 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/images/back-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/coding-coach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emmabostian/gatsby-blog/b748b0c1add4960eea9e6eda662ff90c9cd1c0ed/src/images/coding-coach.png -------------------------------------------------------------------------------- /src/images/gatsby-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emmabostian/gatsby-blog/b748b0c1add4960eea9e6eda662ff90c9cd1c0ed/src/images/gatsby-icon.png -------------------------------------------------------------------------------- /src/images/gotomeeting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emmabostian/gatsby-blog/b748b0c1add4960eea9e6eda662ff90c9cd1c0ed/src/images/gotomeeting.png -------------------------------------------------------------------------------- /src/images/home-graphic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 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 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /src/images/ibm-q-network.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emmabostian/gatsby-blog/b748b0c1add4960eea9e6eda662ff90c9cd1c0ed/src/images/ibm-q-network.png -------------------------------------------------------------------------------- /src/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/lopdp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emmabostian/gatsby-blog/b748b0c1add4960eea9e6eda662ff90c9cd1c0ed/src/images/lopdp.png -------------------------------------------------------------------------------- /src/images/planit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emmabostian/gatsby-blog/b748b0c1add4960eea9e6eda662ff90c9cd1c0ed/src/images/planit.png -------------------------------------------------------------------------------- /src/images/resume-purple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emmabostian/gatsby-blog/b748b0c1add4960eea9e6eda662ff90c9cd1c0ed/src/images/resume-purple.png -------------------------------------------------------------------------------- /src/images/resume-turquoise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emmabostian/gatsby-blog/b748b0c1add4960eea9e6eda662ff90c9cd1c0ed/src/images/resume-turquoise.png -------------------------------------------------------------------------------- /src/pages/2018-09-01-six-mistakes-youre-making-as-a-beginner-web-developer/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: '/six-mistakes-youre-making-as-a-beginner-web-developer' 3 | date: '2018-09-01' 4 | title: 'Six Mistakes You Are Making As A Beginner Web Developer' 5 | author: 'Emma Wedekind' 6 | description: 'Learning web development is intimidating. There are so many resources and tutorials that it can quickly seem overwhelming. It’s often difficult for beginners to web development to learn the best practices and technologies to focus on. So we’re going to examine six common mistakes that beginners make and how they can be avoided.' 7 | --- 8 | 9 | ![Computer](https://cdn-images-1.medium.com/max/2000/1*_BSX61CxShyqW7oT7Kgc8Q.jpeg) 10 | 11 | Learning web development is intimidating. There are so many resources and tutorials that it can quickly seem overwhelming. It’s often difficult for beginners to web development to learn the best practices and technologies to focus on. So we’re going to examine six common mistakes that beginners make and how they can be avoided. 12 | 13 | By learning how to avoid these six mistakes, you’ll be on the road to impressing potential employers and getting your first job. 14 | 15 | ![Relying On jQuery](https://cdn-images-1.medium.com/max/1600/1*Rt6uwgsAYOaO1vFckw18Zg.jpeg) 16 | 17 | [jQuery](https://jquery.com/) is a JavaScript library which creates a layer of abstraction for DOM manipulation, event handling, animations, and more. 18 | 19 | Many developers begin their journey into front-end start with the misconception that jQuery is an easier version of JavaScript. What most fail to realize is that jQuery can in no way replace JavaScript, and relying on it can have severe implications on your ability to thrive as a front-end developer. 20 | 21 | Many employers even see jQuery as an impediment to a candidate, because it can show a lack of understanding of core JavaScript concepts. Thus, if you choose to learn jQuery, you must not use it as a crutch for adding behavior to your web applications. 22 | 23 | **Recommendation:** Learn JavaScript like the back of your hand. [Kyle Simpson](https://github.com/getify) has a ton of great (and free) online books for learning the [ins-and-outs](https://github.com/getify/You-Dont-Know-JS) of JavaScript. 24 | 25 | ![Relying On Frameworks](https://cdn-images-1.medium.com/max/1600/1*qBJb48PYigO8F3kT-EiepA.jpeg) 26 | 27 | React, Vue, Angular, and more! These are some of the hot frameworks in the JavaScript community right now. But one of the biggest mistakes most beginner developers make is jumping straight into learning these tools without a strong understanding of JavaScript. 28 | 29 | While knowledge of, and ability to work with, popular JavaScript frameworks and libraries are marketable skills to have, you must learn JavaScript before picking them up. If you fail to learn the foundations of JavaScript, you never truly learn what the features of these frameworks are doing under-the-hood. 30 | 31 | **Recommendation:** Build a strong foundation of JavaScript before delving into frameworks; it’s a much more valuable skill than framework-specific knowledge. This also puts you at an advantage for technical interview questions. If you understand JavaScript to the core, you will have no problem adopting a new framework. 32 | 33 | If you’re unsure how to begin learning JavaScript, check out my [previous blog post](https://levelup.gitconnected.com/how-to-learn-javascript-839fa03745c8) on how to get started. 34 | 35 | ![Using Bootstrap](https://cdn-images-1.medium.com/max/1600/1*q__6tRc91FRZ-Hw_SELWog.jpeg) 36 | 37 | [Bootstrap](https://getbootstrap.com/) is a UI framework for building websites. Many developers starting out view Bootstrap as an easy way to style a web application. But in actuality, relying on Bootstrap is a huge hinderance in the eyes of employers because it shows a lack of knowledge about performance and CSS basics. 38 | 39 | Including Bootstrap in small web applications has performance implications. It’s much easier on load-time to write the CSS code yourself. Employers would much rather see your knowledge of CSS than any UI framework. 40 | 41 | **Recommendation:** Learn [CSS Flexbox](https://levelup.gitconnected.com/when-to-use-css-flexbox-vs-grid-or-both-c1a5f01dc88a) and Grid for a responsive layout, learn fundamentals of CSS and once you master that, learn [Sass](https://sass-lang.com/). If you have trouble designing your app, head over to [dribbble](https://dribbble.com/) for some design inspiration, or check out the templates on [Wix](https://www.wix.com/) or [Squarespace](https://www.squarespace.com/?channel=pbr&subchannel=go&campaign=branded-europe&subcampaign=%28search-global-branded_squarespace_e%29&gclid=CjwKCAjwq57cBRBYEiwAdpx0vVoE6trKqOJrnoGWrb7lZHx34NGSMasTeTIKJaAacU1nGTSdImmGfhoCw0QQAvD_BwE). 42 | 43 | ![Not Modularizing Your Code](https://cdn-images-1.medium.com/max/1600/1*iqv7ig_CPsUuPRfyasBSPQ.jpeg) 44 | 45 | It’s extremely important to ensure your code is modular; do not put it all into one HTML file. Not only is it bad practice to have HTML, CSS, and JavaScript into one file, it’s messy and difficult to test. 46 | 47 | **Recommendation:** Break your JavaScript into an external file. This allows you to separate functionality from your view. Once you feel comfortable with JavaScript, I recommend learning about [native web components](https://codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2). It will greatly enhance your project architecture and make it easier to write unit tests. You can additionally consider a JavaScript framework or library like [React](https://levelup.gitconnected.com/building-a-recipe-book-in-react-part-1-c05b3e53cbb1) or Vue. Both of these make it very easy to implement modular components, however be sure to understand vanilla JavaScript before tackling one of these! 48 | 49 | ![Not Using Semantic HTML](https://cdn-images-1.medium.com/max/1600/1*EVb4PTcC23BzqmE6RoITsQ.jpeg) 50 | 51 | One thing I often see when reviewing candidates’ portfolios and projects is the over-use of `
` and ``. You should always be using semantic HTML5 elements. Why? Because it’s accessible. 52 | 53 | **Recommendation:** Really get to know the semantic elements you have available to you. Learn how to create a markup hierarchy. Additionally, learning about web [accessibility](https://codeburst.io/seven-ways-to-make-your-web-app-more-accessible-411a8c716fcb) is a great skill and can impress potential employers. 54 | 55 | ![Not Learning Responsive Design](https://cdn-images-1.medium.com/max/1600/1*1xYXQcarBsdbyLKTgVhzYA.jpeg) 56 | 57 | If you’re beginning your web development journey, responsive design skills are a must. The majority of web surfing is done on mobile devices and tablets, thus our sites must be able to respond to different screen sizes. 58 | 59 | **Recommendation:** Take a course or two on responsive design. Learn how to use media queries to style your application differently. Learning [Flexbox and CSS Grid](https://levelup.gitconnected.com/when-to-use-css-flexbox-vs-grid-or-both-c1a5f01dc88a) will also be very useful. You might even want to take a [mobile-first](https://www.pluralsight.com/courses/mobile-first-responsive-web-design?gclid=CjwKCAjwq57cBRBYEiwAdpx0vXWVWneBbyRUooDlu1nEAIgDdVCiRVVkQkoNp9aOUahLUQRywOulRxoCS0kQAvD_BwE&aid=7010a000002BWqGAAW&promo=&oid=&utm_source=non_branded&utm_medium=digital_paid_search_google&utm_campaign=EMEA_Dynamic&utm_content=&s_kwcid=AL!5668!3!277727473382!b!!g!!&ef_id=WwQn1AAAAMIlu2jc:20180830171925:s) approach. 60 | 61 | ## Conclusion 62 | 63 | I hope these tips have helped clarify some common misconceptions. Just remember that we all started somewhere, and it will get easier over time. 64 | 65 | If you have any questions, feel free to find me on social media! 66 | 67 | If you’d like to know more, follow me on Twitter, LinkedIn, or Instagram! 68 | -------------------------------------------------------------------------------- /src/pages/2018-09-06-how-to-build-a-captivating-presentation-using-html-css-and-js/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: '/how-to-build-a-captivating-presentation-using-html-css-and-js' 3 | date: '2018-09-06' 4 | title: 'How To Build A Captivating Presentation Using HTML, CSS, & JavaScript' 5 | author: 'Emma Wedekind' 6 | description: 'Building beautiful presentations is hard. Often you’re stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.' 7 | --- 8 | 9 | ![Header image](https://cdn-images-1.medium.com/max/2000/1*d57o560SJ8jthOajFUxMfA.jpeg) 10 | 11 | Building beautiful presentations is hard. Often you’re stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore. 12 | 13 | Today, we’re going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript. 14 | 15 | If you’re a beginner to web development, don’t fret! This tutorial will be easy enough to keep up with. So let’s slide right into it! 16 | 17 | ![Getting Started](https://cdn-images-1.medium.com/max/2000/1*CN43a2YgQ82c5Fl1wIoZ2A.png) 18 | 19 | We’re going to be using an awesome framework called [Reveal.js](https://revealjs.com/#/). It provides robust functionality for creating interesting and customizable presentations. 20 | 21 | 1. Head over to the [Reveal.js repository](https://github.com/hakimel/reveal.js) and clone the project (you can also fork this to your GitHub namespace). 22 | 23 | ![Github](https://cdn-images-1.medium.com/max/1600/1*S_ZYbkd7Y6j1_Lj1RE0sWg.png) 24 | 25 | 2. Change directories into your newly cloned folder and run `npm install` to download the package dependencies. Then run `npm start` to run the project. 26 | 27 | ![Presentation slide](https://cdn-images-1.medium.com/max/1600/1*Pw39d6yELnp3yckd8UBAfQ.png) 28 | 29 | The `index.html` file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file. 30 | 31 | ![Themes](https://cdn-images-1.medium.com/max/2000/1*m53gA3UQzLjzYBGFlaNtDQ.png) 32 | 33 | ## Built-In Themes 34 | 35 | Reveal includes 11 built-in themes for you to choose from: 36 | 37 | ![Reveal Themes](https://cdn-images-1.medium.com/max/2000/1*ap5v9NJodgzByZEJzMCGfA.jpeg) 38 | 39 | ### Changing The Theme 40 | 41 | 1. Open `index.html` 42 | 2. Change the CSS import to reflect the theme you want to use 43 | 44 | ![VS Code](https://cdn-images-1.medium.com/max/2000/1*mAPjCb73GiiiJUHEnRInOQ.png) 45 | 46 | **The theme files are:** 47 | 48 | - beige.css 49 | - black.css 50 | - blood.css 51 | - league.css 52 | - moon.css 53 | - night.css 54 | - serif.css 55 | - simple.css 56 | - sky.css 57 | - solarized.css 58 | - white.cs 59 | 60 | ## Custom Themes 61 | 62 | It’s quite easy to create a custom theme. Today, I’ll be using my custom theme from a presentation I gave called [“How To Build Kick-Ass Website: An Introduction To Front-end Development.”](https://ejbostian.github.io/how-to-become-a-web-developer/) 63 | 64 | Here is what my custom slides look like: 65 | 66 | ![Slides](https://cdn-images-1.medium.com/max/2000/1*ihTBdnMw9G83aD1hj45__w.png) 67 | 68 | ### Creating A Custom Theme 69 | 70 | 1. Open `css/theme/src` inside your IDE. This holds all of the Sass files (`.scss`) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme. 71 | 2. Create a new `.scss` file. I will call mine `custom.scss`. You may have to stop your localhost and run npm run build to transpile your Sass code to CSS. 72 | 3. Inside the index.html file, change the CSS theme import in the `` tag to use the name of the newly created stylesheet. The extension will be `.css`, not `.scss`. 73 | 4. Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL’s into the `index.html` file. 74 | 75 | Here are the variables I chose to use: 76 | 77 | - Title Font: [Viga](https://fonts.google.com/specimen/Viga) 78 | - Content Font: [Open Sans](https://fonts.google.com/specimen/Open+Sans) 79 | - Code Font: [Courier New](https://fonts.google.com/?query=Courier+New) 80 | - Cursive Font: [Great Vibes](https://fonts.google.com/specimen/Great+Vibes) 81 | - Yellow Color: `#F9DC24` 82 | 83 | 5. Add a `.reveal` class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling! 84 | 85 | _Unfortunately, due to time constraints, I’ll admit that I used quite a bit of !important overrides in my CSS. This is horrible practice and I don’t recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the `!importants`._ 86 | 87 | ### Mixins & Settings 88 | 89 | Reveal.js also comes with mixins and settings you can leverage in your custom theme. 90 | 91 | To use the mixins and settings, just import the files into your custom theme: 92 | 93 | ``` 94 | @import "../template/mixins"; 95 | @import "../template/settings"; 96 | ``` 97 | 98 | ### Mixins 99 | 100 | You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect. 101 | 102 | All you have to do is pass in the required parameters (color value) and voila, you’ve got a gradient! 103 | 104 | ### Settings 105 | 106 | In the settings file, you’ll find useful variables like heading sizes, default fonts and colors, and more! 107 | 108 | ![Content](https://cdn-images-1.medium.com/max/2000/1*lK72ePLIQbehCt0BLgidTg.png) 109 | 110 | ## Elements 111 | 112 | The structure for adding new content is: 113 | 114 | ``` 115 | .reveal > .slides > section 116 | ``` 117 | 118 | The `
` element represents one slide. Add as many sections as you need for your content. 119 | 120 | ### Vertical Slides 121 | 122 | To create vertical slides, simply nest sections. 123 | 124 | ## Transitions 125 | 126 | There are several different slide transitions for you to choose from: 127 | 128 | - None 129 | - Fade 130 | - Slide 131 | - Convex 132 | - Concave 133 | - Zoom 134 | 135 | To use them, add a `data-transition="{name}"` to the `
` which contains your slide data. 136 | 137 | ## Fragments 138 | 139 | Fragments are great for highlighting specific pieces of information on your slide. [Here](https://revealjs.com/#/fragments) is an example. 140 | 141 | To use fragments, add a `class="fragment {type-of-fragment}"` to your element. 142 | 143 | The types of fragments can be: 144 | 145 | - grow 146 | - shrink 147 | - fade-out 148 | - fade-up 149 | - fade-in-then-out 150 | - fade-in-then-semi-out 151 | - highlight-current-blue 152 | - highlight-red 153 | - highlight-green 154 | - highlight-blue 155 | 156 | You can additionally add indeces to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the `data-fragment-index={index}` attribute. 157 | 158 | There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started. 159 | 160 | To learn more about how to format your slides, check out the [reveal.js tutorial](https://revealjs.com/#/10). 161 | 162 | All of the code for my presentation can be viewed on [GitHub](https://github.com/ejbostian/how-to-become-a-web-developer). Feel free to steal my theme! 163 | -------------------------------------------------------------------------------- /src/pages/2018-10-03-how-to-write-a-stand-out-techncial-resume/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: '/how-to-write-a-stand-out-techncial-resume' 3 | date: '2018-10-03' 4 | title: 'How To Write A Stand-Out Technical Resume' 5 | author: 'Emma Wedekind' 6 | description: 'Writing a resume is hard. Yet even today, most job applications require resumes to be considered for a position. The true goal behind a resume is to market yourself. You are your best advocate.' 7 | --- 8 | 9 | ![Computer](https://cdn-images-1.medium.com/max/2000/1*kP1T8RSVBamsFmEMBWBcdA.jpeg) 10 | 11 | Writing a resume is hard. Yet even today, most job applications require resumes to be considered for a position. The true goal behind a resume is to market yourself. You are your best advocate. 12 | 13 | You must create a resume that can advocate for you even when compared with many other qualified candidates. 14 | 15 | ![Basic Information](https://cdn-images-1.medium.com/max/2000/1*WGX9cOTOgESvjuKA-Bkxnw.png) 16 | 17 | ### Education 18 | 19 | If you are a college graduate, it’s not necessary to list your high school experience. 20 | 21 | If you have attended a bootcamp but do not possess a college degree, you can include your high school information. 22 | 23 | If you have studied abroad, you’re welcome to add this information beneath your main degree program (if space permits). 24 | 25 | Any college degree should be listed in reverse chronological order (Ph.D, M.S., B.S.). 26 | 27 | ### College Or High School Graduate 28 | 29 | - Name of the institution 30 | - City/state/country 31 | - Month and year the degree was obtained (or expected graduation date) 32 | - Degree information (i.e. B.S. Computer Science) 33 | 34 | ### Bootcamp Program 35 | 36 | - Name of the program 37 | - City/state/country/online 38 | - Month and year the program started 39 | - Month and year the program ended (or expected completion date) 40 | - Program information (i.e. Front-end Development Program) 41 | 42 | ### Contact Details 43 | 44 | You can add contact details to the footer of your resume, but they must be present in the body of the document as well. 45 | 46 | You may also choose to include links to social media or networking sites such as LinkedIn, GitHub, CodePen, and more. 47 | 48 | Just ensure they’re done in an appropriate manner and don’t take away from the main content. Steer away from including sites that do not have a lot of information or substance to them. 49 | 50 | - Full name 51 | - Current city/state/country 52 | - Phone number 53 | - Email address 54 | - Personal portfolio/blog/social media/GitHub, etc. (where applicable and relevant). 55 | 56 | ### Work Experience 57 | 58 | This is one of the most vital sections on a resume. If you’re just graduating high school or college and have no relevant work experience, you can include one to two jobs which indicate your employment history. 59 | 60 | It’s best to list work experience which exemplifies the industry you wish to be part of. Internships are a great way to get some work experience and I highly recommend this for people who are new to the industry. 61 | 62 | If you don’t have the means or ability to obtain relevant work experience, include projects you have worked on which showcase your skillset. Freelance work is also a great way to get some experience. 63 | 64 | - Employer name 65 | - City/state/country 66 | - Month and year employment started 67 | - Month and year employment ended (present or current if you still work here) 68 | - Job title 69 | - 1–2 sentences, or bullet points, stating what you were responsible for. These should be specific examples of contributions you made. Stay away from generic filler text. Use [positive language](https://www.businessinsider.com/the-17-worst-things-to-say-on-your-resume-2014-3?IR=T) such as achieved, influenced, mentored, and launched. 70 | 71 | ### Skills 72 | 73 | The skills section is the second most important section on a resume. Its primary concern is listing all of your technical and non-technical capabilities. 74 | 75 | Personally, I believe you should leave off skills similar to“Microsoft Word”, “Keynote”, and “Mac OS”. These skills are quite standard and can make it appear as though you’re trying to fill space on your resume. 76 | 77 | Instead, showcase the skills you’re proud of and which differentiate you from the competition. 78 | 79 | **Do not list skills which you would not be comfortable answering questions about on a technical interview.** 80 | 81 | I have made this mistake myself, but potential employers are free to ask you questions regarding any skill listed on your resume. 82 | 83 | If you created a small pet project using PHP back in 2011, but forgot all the necessary skills, don’t list it. 84 | 85 | I like to break my skillsets down into buckets: 86 | 87 | - Programming Languages & Frameworks (JavaScript, React, etc.) 88 | - Software (Sketch, Adobe Illustrator, etc.) 89 | - Methodologies & Practices (Agile, Scrum, etc.) 90 | 91 | ### Personal Statement & References 92 | 93 | I personally find a personal statement to be outdated. In prior years it was standard to include an objective, but the standards for resumes have relaxed a bit in recent years. You are welcome to add a personal note or objective, but I don’t find it necessary. 94 | 95 | I tend to leave references off of my resume. If a potential employer requires references, they will ask you. Thus, I save the space and leave them off. 96 | 97 | ### Additional Information 98 | 99 | Awards and certifications are great things to add (if you have the space). If you have a lot of these, narrow them down to the top five which best represent your work or character. 100 | 101 | Additionally, adding some of your personality into your resume can go a long way to differentiating you from the crowd. We’re spoiled by the informal nature of the tech industry, so our resumes can leverage a bit more creative license. 102 | 103 | By incorporating small colloquialisms and designs into our resume, you show the hiring manager or recruiter who you are. 104 | 105 | It’s important to put love and effort into your resume as this can indicate to the employer your attention to detail. 106 | 107 | ![Tips For A Successful Resume](https://cdn-images-1.medium.com/max/2000/1*wsHFrWnU3EYPz6rjYILEkw.png) 108 | 109 | ### Keep It Succinct 110 | 111 | Unless you have ten or more years in the relevant industry, your resume should be no longer than one page. Often, recruiters will glance at the first page of your resume and throw it aside if they don’t immediately see something worth a deeper look. 112 | 113 | You have once chance to make a good and unique first impression. 114 | 115 | ### Be Selective About Technology Skills 116 | 117 | Do not list every single skill or technology you’ve ever acquired. If you don’t currently possess it, don’t list it. It could lead to some awkward conversations in an interview. 118 | 119 | ### Don’t Include Every Detail About Your Life 120 | 121 | You have at most two pages to convince an employer they should at the very least interview you. Thus, it’s important to be selective about what bits of information you share. 122 | 123 | Additionally, you want to leave room for some intrigue. If you list everything about yourself on your resume, there’s nothing left for the employer to ask you about. 124 | 125 | ### Format Is Key 126 | 127 | There is nothing worse than a resume with spelling and grammatical errors. 128 | 129 | To combat this have two or three people review your resume. Ask them what their first impression is at first glance. Many programs include spell check; use it. 130 | 131 | Be selective and consistent with your font choices and ratios. Do not choose “fun” or difficult to read font. Stick with a serif or sans-serif font. Use at most two font families. 132 | 133 | Your font should be no smaller than ten pixels. 134 | 135 | Ensure you are consistent with spacing. This can have a major impact on the clarity and visual attractiveness of your resume. 136 | 137 | ![Creating A Resume](https://cdn-images-1.medium.com/max/2000/1*uo14ELOKGh8Smekl_LCrFQ.png) 138 | 139 | There are many programs you can use to create your resume. Most applications require a .doc, .docx, or .pdf format, so ensure the program you select can export to these file types. 140 | 141 | I highly recommend first creating a bare-bones resume with the content as the main focus. “Pretty” resumes are wonderful, but are only effective if the content stacks up. 142 | 143 | ### Software For Creating A Resume 144 | 145 | - Microsoft Office 146 | - Google Doc 147 | - Resume Builders 148 | - Sketch 149 | 150 | ### Phase 1: Bare Basics 151 | 152 | Here is what an example “basic” resume might look like. I created this using a Microsoft Word template. 153 | 154 | This is a great first step towards creating an awesome resume. The focus of this version should be the content. 155 | 156 | You may choose to use this as your final product, and that’s fine. But adding a few visual enhancements will greatly improve your ability to stand out. 157 | 158 | ![Emma's Resume](https://cdn-images-1.medium.com/max/1600/1*WdQX-H2dFvrvtnIQYHMmTg.png) 159 | 160 | ### Phase 2: Visual Flair 161 | 162 | Now it’s time to add some visual flair. I prefer to use [Sketch](https://www.sketchapp.com/) to create beautiful graphics and designs. You can download a free version and find some awesome YouTube tutorials to get started. 163 | 164 | You can also create custom resumes using Google Docs or Microsoft Office, but it might take a bit longer. 165 | 166 | I tend to stick to one or two colors. Nothing too bright or abrasive. 167 | 168 | It’s not a necessity to include a photo. I tend to select a photo which matches my social media accounts and LinkedIn so I am easily identifiable. 169 | 170 | By creating a beautiful resume, you’re likely to stand out from the crowd. 171 | 172 | ![Emma's Resume](https://cdn-images-1.medium.com/max/1600/1*agpfVchU-lvZ6I_0JzUD8w.png) 173 | 174 | _Both of the resumes can be downloaded below. Feel free to customize them to your liking!_ 175 | 176 | [Simple Resume](https://drive.google.com/file/d/1Vy4rkd7idJ6TlCToKz-Ln_7PQCOCsVej/view) 177 | 178 | [Fancy Resume (PDF)](https://drive.google.com/file/d/1PVmZdHugJkGyI7KQ7Cd332pE8mjA7yvF/view) 179 | 180 | [Fancy Resume (Sketch)](https://drive.google.com/file/d/1jlEmQsafx_XOhSUEPBePsJeTz-PbJ9sV/view) 181 | 182 | ![Conclusion](https://cdn-images-1.medium.com/max/2000/1*A7o8MWs2lu1zyIsB12HhAw.png) 183 | 184 | By leveraging these tips, you’re bound to create a stand-out technical resume. It’s important to always keep your resume relevant as your skills, work experience, and education changes. 185 | 186 | Good luck and feel free to reach out on Twitter if you have any questions! 187 | -------------------------------------------------------------------------------- /src/pages/2018-10-16-how-to-combat-bias-in-the-tech-industry/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: '/how-to-combat-bias-in-the-tech-industry' 3 | date: '2018-10-16' 4 | title: 'How To Combat Bias In The Tech Industry' 5 | author: 'Emma Wedekind' 6 | description: 'Bias has been prevalent since the dawn of time, and as humans we fall prey to being biased in many facets of our lives (whether we realize it or not). Yet we are currently enduring an era where bias is permeating the tech industry, and something must be done.' 7 | --- 8 | 9 | ![Two people at computer](https://cdn-images-1.medium.com/max/2000/1*cyq39_Fi_qPwiAJqgeCsCg.jpeg) 10 | 11 | Bias has been prevalent since the dawn of time, and as humans we fall prey to being biased in many facets of our lives (whether we realize it or not). Yet we are currently enduring an era where bias is permeating the tech industry, and something must be done. 12 | 13 | _“The inclination or prejudice for or against one person or group, especially in a way considered to be unfair.”_ 14 | 15 | The gender gap is one of the most widely-recognized cases of bias in the technical industry, but it’s not the only one. 16 | 17 | ## Understanding Bias 18 | 19 | Unconscious bias is one of the biggest catalysts to a lack of diversity in the technical industry. Although the largest impact can be seen within the hiring process, the effects trickle down throughout promotions and other areas. 20 | 21 | There are nine types of unconscious bias: 22 | 23 | ### Affinity Bias 24 | 25 | An unconscious preference for people who share similar qualities with you or someone you like. 26 | 27 | ### Attribution Bias 28 | 29 | How you perceive your actions and those of others — our personal accomplishments are the result of hard work, but our failures are the result of external factors, whereas a candidate’s accomplishments are the result of luck and their failures result of a lack of ability. 30 | 31 | ### Beauty Bias 32 | 33 | An unconscious preference for people who are physically attractive. 34 | 35 | ### Conformity Bias 36 | 37 | When your views are swayed too much by those of other people. 38 | 39 | ### Confirmation Bias 40 | 41 | An unconscious search for evidence which support your opinions. 42 | 43 | ### The Contrast Effect 44 | 45 | An unconscious comparison of two or more similar candidates as opposed to examining each candidate individually. 46 | 47 | ### Gender Bias 48 | 49 | A preference for one gender over another gender. 50 | 51 | ### The Halo Effect 52 | 53 | Focusing on one particularly positive feature of a candidate. 54 | 55 | ### The Horns Effect 56 | 57 | Focusing on one particularly negative feature of a candidate. 58 | 59 | Unconscious bias directly impacts our ability to hire great candidates, so we must be diligent about recognizing and fighting it every single day. 60 | 61 | ## Why This Matters 62 | 63 | When we don’t address unconscious bias in the technical industry, severe problems begin to arise. 64 | 65 | ### Diversity In The Workplace 66 | 67 | Your company cannot employ a diverse workforce if unconscious bias is not addressed. When companies hire candidates who fit a one-size-fits-all mold, there is a lack of innovation. 68 | 69 | _“Companies that employ a more diverse workforce tend to have higher levels in innovation.”_ 70 | 71 | Innovation is drastically improved with a diverse workforce, because people from different backgrounds tend to view the world differently; they bring different vantage points to the drawing board. 72 | 73 | Additionally, employees from diverse backgrounds are more likely to empathize with users from all over the world, which can enhance the quality of the relationships you forge with your customers and may allow you to create solutions tailored to all. 74 | 75 | ### Algorithms Are Learning Bias 76 | 77 | One massive impact of unconscious bias in the tech industry is the inability of the algorithms we develop to be unbiased. If our workforce isn’t diverse, the algorithms we build inherently cannot adopt diverse ways of “thinking.” 78 | 79 | Facial recognition algorithms designed by IBM, Microsoft, and Face++ were found to have [error rates](https://www.theverge.com/2018/7/26/17616290/facial-recognition-ai-bias-benchmark-test) approximately 35 percent higher when detecting the gender of darker-skinned women as opposed to lighter-skinned men. 80 | 81 | By removing unconscious bias we can employ a more diverse set of employees, which in turn may provide our algorithms with the tools needed to be inclusive of all people. 82 | 83 | ### Employee Wellbeing 84 | 85 | Out of 557 female scientists interviewed by [Harvard Business Review](https://hbr.org/2015/03/the-5-biases-pushing-women-out-of-stem?cm_lm=), two-thirds reported having to prove their skillset time and time again. And unfortunately, this constant need to prove their worth has driven many women out of the career. 86 | 87 | In a survey conducted by [CNN Money](https://money.cnn.com/interactive/technology/tech-diversity-data/), it was found that just 30% of professionals at Dell identify as female and that statistic dropped as low as 25% at Intel. 88 | 89 | Unconscious bias is leading to employees feeling insecure or personally attacked in the workplace. An effective company ensures the well-being of all employees, regardless of demographic or circumstance. 90 | 91 | ## Why This Matters 92 | 93 | There are five ways in which we can combat bias in the tech industry. 94 | 95 | ### 1. Provide Different Technical Interviewing Styles 96 | 97 | Many technical interviews are geared towards one type of candidate; those who thrive under pressure to live-code and answer tricky technical questions. Developers who get nervous under pressure tend to fail at these types of interviews, but these can be some of the most brilliant candidates. 98 | 99 | By only leveraging high-stress, “on-the-spot” technical interviews, companies may exclude candidates who would be a true asset to their team. 100 | 101 | Thus, companies should leverage different interview styles, such as take-home challenges or pair programming, for candidates in order to ensure everyone has a fair chance to succeed. 102 | 103 | At LogMeIn I was given a take-home coding challenge. This task was achievable within a few hours, and was open-ended, ultimately allowing me to select my tech stack and architect the application as I saw fit. 104 | 105 | The take-home coding challenge is one great example of a different style of interviewing. It allowed me to showcase my skills in a low-stress situation, and ultimately get the job. 106 | 107 | Other technical interview styles could include pair programming. Through a pair programming activity, team members can see what it would be like to work with a candidate. 108 | 109 | The types of questions candidates are asked during interviews can also make or break their success. During my interview with my current manager, he asked me the following question: 110 | 111 | “What books or resources would you suggest to someone who has no knowledge of front-end development, but wants to learn?” 112 | 113 | This shows insights on a few different levels. It shows that the candidate is capable of educating fellow developers. It shows that the candidate stays up-to-date in the industry. It shows that the candidate has a passion for learning. 114 | 115 | Asking these types of questions give valuable insight into a candidate’s technical ability without putting them on-the-spot with a technical problem. 116 | 117 | The important note is to provide alternatives for candidates to showcase their best work. 118 | 119 | ### 2. Provide Interest & Support Groups 120 | 121 | If you’re going to hire a diverse set of employees, it’s important to ensure they feel included in the company. 122 | 123 | LogMeIn is making great strides towards inclusiveness. LogHerIn is an initiative at LogMeIn which encourages women in technology. It’s a great way for women across the company to make connections and get support. There is even a Slack channel called Ladies Lunch which allow women to find a buddy for lunch, and not eat alone. 124 | 125 | LogMeIn also supports LGBTQ+ PRIDE, which stands for Promoting Respect, Inclusion, Diversity, and Equality. 126 | 127 | _“We are driven to increase employee community awareness and create an inclusive environment. We want LogMeIn employees to bring their true authentic selves to work regardless of sexual orientation, gender identity, gender expression, or any other characteristic.”_ 128 | 129 | PRIDE offers multiple benefits to employees such as: 130 | 131 | - Discussions for LGBTQ+ employees and Allies 132 | - Regular meetings about issues which impact LGBTQ+ employees 133 | - Celebrating PRIDE events around the world 134 | - Panel discussions about various LGBTQ+ topics 135 | 136 | Interest and support groups allow employees of diverse backgrounds and demographics to connect on a personal level, ultimately delivering better work and enhancing employee [happiness](http://lasd/). 137 | 138 | ### 3. Create A Culture Of Acceptance And Trust 139 | 140 | My development team at LogMeIn created a social contract in order to establish more meaningful and trustworthy relationships. [Social contracts](https://hbr.org/2012/04/to-ensure-great-teamwork-start) are a great way to set the standard for acceptable communication and behavior. 141 | 142 | Additionally, it’s important to re-iterate important points that are said during meetings. If a team member makes a valuable observation, start your next point with “Sarah had a really great point, and to build on that…” This will build up your colleagues and validate their self-assuredness. 143 | 144 | ### 4. Respect Your Colleagues 145 | 146 | All employees, regardless of demographic, deserve the same level of respect. This extends to compensation. The amount of money an employee makes should be based on merit, not on demographic; two employees in the same role, performing at the same level should make the same salary. 147 | 148 | When we base salary on gender or demographic, we limit the amount of greatness that employee can achieve. 149 | 150 | I’m not advocating that all employees in the same role should receive the same salary. Instead, employees performing at the same level for each role should be compensated equally. 151 | 152 | ### 5. Engage The Community 153 | 154 | In order to eliminate unconscious bias, and employ a diverse workforce, we must start at the root of the issue; we must promote engineering as a viable career path for all beginning at a young age. 155 | 156 | Several conferences are making strides towards promoting engineering to the younger generations. 157 | 158 | The [Girls Who Code](https://girlswhocode.com/) organization is pivotal to the younger generation of girls who are considering engineering as a career path. Their goal is to close the gender gap in technology, and have served over [9,000 girls](https://girlswhocode.com/about-us/?nabe=6169758503534592:3) to-date. 159 | 160 | By engaging the community, we plant the seed of programming as a legitimate and achievable career path to all children. 161 | 162 | ## Conclusion 163 | 164 | We can change the stigma surrounding the tech industry with a little work and dedication. By recognizing our implicit biases we can combat a lack of diversification and improve the gap for women and under-represented minorities in science and technology. 165 | -------------------------------------------------------------------------------- /src/pages/2018-10-27-mentorship-in-the-tech-industry/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: '/mentorship-in-the-tech-industry' 3 | date: '2018-10-27' 4 | title: 'Mentorship In The Tech Industry' 5 | author: 'Emma Wedekind' 6 | description: 'Mentorship is typically thought of as a one-way street; knowledge flows from the mentor to the mentee. Yet mentorship should encapsulate so much more.' 7 | --- 8 | 9 | ![Two women sitting at a computer](https://cdn-images-1.medium.com/max/2000/1*hUO_8TtnehSqpj_NPESE8Q.jpeg) 10 | 11 | Mentorship is typically thought of as a one-way street; knowledge flows from the mentor to the mentee. Yet mentorship should encapsulate so much more. 12 | 13 | It’s imperative that we alter our mindsets to view mentorship as a bi-directional relationship; mentorship is the ability for two people to learn and grow towards a common goal. 14 | 15 | Although mentorship can play a pivotal role in the success of a developer’s career, there is a severe mentorship deficit within the technical industry. This can be mostly attributed to developers not knowing who to ask or where to start. 16 | 17 | We must streamline the process of finding a mentor in the technical industry in order to promote growth through a developer’s career. 18 | 19 | ## Statistics 20 | 21 | _Responses were gathered from a random selection of 118 people on Twitter._ 22 | 23 | ![Statistics of mentorship](https://cdn-images-1.medium.com/max/1600/1*k8wHduyrj_94DDBKXW4bmg.png)] 24 | 25 | ![Statistics of mentorship](https://cdn-images-1.medium.com/max/1600/1*1Cty5lYBMgUpDDvZbpnS8Q.png)] 26 | 27 | ![Statistics of mentorship](https://cdn-images-1.medium.com/max/1600/1*L2sqWD2p-m4Icwejw9HWnQ.png) 28 | 29 | ![Statistics of mentorship](https://cdn-images-1.medium.com/max/1600/1*L2sqWD2p-m4Icwejw9HWnQ.png) 30 | 31 | ![Statistics of mentorship](https://cdn-images-1.medium.com/max/1600/1*3EFA2q9DQjOWg-iaztsezQ.png) 32 | 33 | ![Statistics of mentorship](https://cdn-images-1.medium.com/max/1600/1*im_zeyz1JY6cjXSI8VdvPA.png) 34 | 35 | ![Statistics of mentorship](https://cdn-images-1.medium.com/max/1600/1*bvq4qGhZbUsOAwSByGbIuw.png) 36 | 37 | ## Tips For a Successful Mentorship 38 | 39 | ### Have A Clear, Open-Ended Goal With Milestones 40 | 41 | We often feel that by setting finite goals, we’ll achieve a sense of pride and happiness upon achieving said goal. 42 | 43 | _Goal 1: “If I can just hit my target weight of 130 pounds I’ll be happy!”_ 44 | 45 | In reality, having a finite goal can lead to a sense of un-fulfillment as we’ve capped the level of greatness we’re willing to achieve. Instead you should set open-ended goals with milestones. 46 | 47 | _Goal 2: “I want to maintain a healthy lifestyle so I will have more energy to play with my children. I will do this by eating more portions of fruits and vegetables, exercising 3–4 times weekly, and getting more sleep.”_ 48 | 49 | As we can see, goal 2 is open-ended, which allows us to maintain this progress long-term. 50 | 51 | ### Track Your Progress 52 | 53 | It’s important to track your progress towards a specific goal so both you and your mentor can evaluate the success of your mentorship. 54 | 55 | You can track your progress with a word document, a burn down chart, or any other method of growth tracking. This will also help to encourage you as you hit plateaus along your learning journey. 56 | 57 | ### Set The Right Expectations 58 | 59 | It’s important to arrive at your mentorship meetings with a clear agenda. What do you hope to accomplish during your session? What areas are you struggling with? Ensure, as the mentee, that you’re prepared to drive your mentorship meetings. 60 | 61 | ## Types of Mentorships 62 | 63 | ### Career 64 | 65 | Career-based mentorship are focused around advancing the mentee within their career path. These relationships focus more on the advice-giving side of a mentorship. Some questions you may want to ask your mentor are: 66 | 67 | - How did you get to your current role? What did your career path look like? 68 | - Do you have any advice for a novice in the industry? What do you wish you had known going into this field? 69 | - What areas should I focus on if I want to achieve the role of X? 70 | 71 | ### Technical 72 | 73 | The best technical mentorships focus around the “doing.” In my experience, if you want to learn a technology the best way to do so is through coding. 74 | 75 | - Choose a technology you want to improve upon (i.e. React, GraphQL, etc.). 76 | - Come up with a side project which could be built with this technology (i.e. recipe book, q&a forum, etc.). 77 | - Set clear development goals for each meeting (ie. I want to have the user account developed by the next meeting). 78 | - Review the code with your mentor and walk through your process. What could be improved? Why might a different approach have been more effective? 79 | 80 | ### Personal 81 | 82 | Personal mentorships are focused around you as a person. What characteristics would you like to alter about yourself? 83 | 84 | Perhaps you need mentorship around time management. Or maybe you want to grow your ability to achieve a strong work-life balance. 85 | 86 | Some questions you may ask your mentor are: 87 | 88 | - How do you disconnect and relax from work at night? 89 | - What tips do you have for boosting productivity? 90 | 91 | ## Frequency 92 | 93 | The frequency with which your mentor meetings should take place will vary with each mentorship. Some mentorships will meet monthly, others will meet ad-hoc. It’s important to examine your goals and determine which frequency is right for you. 94 | 95 | I found technical mentorship meetings to be effective every two weeks. In contrast, I found the career-based mentorships to be most effective ad-hoc since I didn’t have a multitude of questions that popped up every week. 96 | 97 | Be open with your mentor/mentee about the frequency which is most appropriate for your type of mentorship. 98 | 99 | ## How To Find A Mentorship 100 | 101 | Finding a mentor can be difficult but the best place to look is often right in front of you. Perhaps there’s someone at work you admire. There is no shame in asking them to be your mentor (what’s the worst that happens; they say no?) 102 | 103 | But for many developers, access to a quality mentor is not as simple as walking down the hall. This is a huge issue in the tech industry that we are trying to solve with Coding Coach. 104 | 105 | I created an open-source project aimed at connecting mentors and mentees from all over the world. Although there are existing platforms, they often cost a bit of money and as a result aren’t accessible to all. 106 | 107 | Feel free to check out Coding Coach’s initiative on [Medium](https://medium.com/codingcoach-io) or [Twitter](https://twitter.com/codingcoach_io). 108 | 109 | ## What Is The Best Platform For Mentor Meetings? 110 | 111 | The best platform to have your mentorship meetings will, again, vary by circumstance. 112 | 113 | - Video Conferencing: GoToMeeting 114 | - Slack 115 | - Phone call 116 | - In-person 117 | 118 | ## What Type Of Mentor Should I Look For? 119 | 120 | There are several characteristics which make great mentors. Look for someone who exudes the following: 121 | 122 | - “Practice what they preach” 123 | - Will push you to achieve your best 124 | - Someone who will invest time into your personal growth 125 | - Someone who can fill a gap in your skillset 126 | 127 | ## Conclusion 128 | 129 | Mentorship is something which will grow your career and development skills beyond your imagination. Yet many people have trouble finding and establishing effective mentorships. My hope is that you can take the suggestions in this article and apply them to your career. 130 | 131 | Don’t get discouraged if someone rejects your mentorship invitation. This will happen, but it’s not the end of the world. You will find the right mentor when the time is right. 132 | 133 | If you’d like to get involved in the Coding Coach initiative, feel free to join the Slack organization. 134 | -------------------------------------------------------------------------------- /src/pages/2018-12-23-nineteen-tips-for-software-engineers-in-2019/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: '/nineteen-tips-for-software-engineers-in-2019' 3 | date: '2018-12-23' 4 | title: '19 Tips For Software Engineers In 2019' 5 | author: 'Emma Wedekind' 6 | description: 'It is almost 2019 and there are some amazing things coming down the pipeline in the world of programming. But for many new developers the prospect of jumping into a career in coding can be intimidating.' 7 | --- 8 | 9 | ![Phone and fireworks](https://images.unsplash.com/photo-1514862474054-e3509f8af30f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80) 10 | It's almost 2019 and there are some amazing things coming down the pipeline in the world of programming. But for many new developers the prospect of jumping into a career in coding can be intimidating. 11 | 12 | There are so many technologies to learn and so many languages to choose from. Thus, I've compiled (no pun intended) a list of 19 tips for software engineers in 2019. 13 | 14 | Happy coding 🤩💻 15 | 16 | # 1. Don't get discouraged 17 | 18 | The technology industry is one of the most intense and volatile industries out there, and it can be overwhelming to jump into. What I try to remember each day is that everyone, at some point in their coding career, started where I did. All of the industry leaders in tech were once beginners. 19 | 20 | Do some people learn faster than others? Yes. But you can't let that discourage you from getting started. 21 | 22 | Coding careers are desirable for a very good reason: you can teach yourself anything on the internet... for free! And often the lifestyle which accompanies a career in tech is much more comfortable than other careers. 23 | 24 | It's important to keep in mind that, while there are a plethora of resources out there, you don't need to learn everything. Start with the basics. 25 | 26 | The first step is to decide whether you'd prefer to begin your career in front-end (the user interface of the application you interact with) or back-end (working with data). Once you choose your niche, start with the basics. 27 | 28 | If you've selected front-end development, hone in on HTML, CSS, and JavaScript. Don't take these skills for granted. While they may seem simple at first glance, a strong knowledge of the foundations of web development will land you your first role as a Software Engineer. Most companies would prefer to see a candidate with strong "vanilla" skills than a pretty good understanding of a popular framework/library. 29 | 30 | If you decide to go the back-end development route, try out a language like Python or Java. These are highly coveted skills in the tech industry. 31 | 32 | But do not get discouraged. You will have days where you feel utterly overwhelmed. Everyone began their journey where you did. It will get easier. 33 | 34 | # 2. Learn to read & decipher code 35 | 36 | One of the skills that I took for granted when I began my coding journey was the ability to read other developer's code. This is a truly important skill because it allows you to work effectively in many different code bases. 37 | 38 | You don't need to know all of the nuances of a programming language in order to decipher what that code is doing. 39 | 40 | There are many ways to learn how to read code. Check out some open-source projects. Read through the documentation and the source code and see if you can delineate what's happening. You'll slowly start to realize that there are improvements that can be made, and perhaps you'll even open a PR! 41 | 42 | Learn to analyze the code and determine whether or not it was written in the most effective way. 43 | 44 | Learning to read and review code is a skill that takes time, but is well worth the effort. 45 | 46 | # 3. Find your method of learning 47 | 48 | Humans learn in different ways. Some retain information best when they're writing code. Others learn best by reading or watching videos. 49 | 50 | I prefer to watch online tutorials and read documentation in order to fill in the gaps. 51 | 52 | I'm not the kind of person who can just start a sandbox application and code away. I like to follow a guided tutorial and then expand upon the ideas. 53 | 54 | Find your method of learning. Try out different resources and platforms. 55 | 56 | Once you find your learning method, you'll find that you learn much more efficiently. 57 | 58 | # 4. Get involved in the community 59 | 60 | I didn't join the online tech community until about 3 years into my coding journey. This put me at a huge disadvantage. 61 | 62 | I struggled greatly with impostor syndrome and found it hard to stay motivated. But once I found a community of developers on Twitter and blogging platforms, I became much more invested in learning. 63 | 64 | Find an open source project. Tweet your coding projects. Push your projects to GitHub. Find a way to get involved, and you'll quickly develop a more intimate relationship with coding. 65 | 66 | # 5. Balance theory with practicality 67 | 68 | In order to become an effective programmer, you must understand the theory behind certain paradigms (to a certain extent). 69 | 70 | For example, if you want to understand why a nested for-loop is not as performant as two for-loops within the same scope, you need to understand Big-O notation. 71 | 72 | We live in an age where you don't need a Computer Science degree to succeed in the tech industry. That being said, some of the concepts taught within a CS degree are extremely valuable (i.e. algorithms, run-time analysis, etc.). 73 | 74 | You don't need to learn all of the computer science theory, but you should understand the theory of why one solution is better than another. 75 | 76 | # 6. Don't compare yourself to others 77 | 78 | Your career will never follow the exact same path as another developer. You should not compare yourself to others. 79 | 80 | You are unique and the skills you offer will be tailored to you. 81 | 82 | Just because one of the industry leaders is learning Ruby on Rails doesn't mean you have to follow suit. Find the skills that get you excited about programming, and learn them to the best of your abilities. 83 | 84 | There is no expected time-frame in regards to learning a technology. As I mentioned in tip 3, people learn by different methods, and as such people learn at different rates. 85 | 86 | Just because it takes you three months to learn JavaScript doesn't mean you're a worse developer than the girl who learned it in one. 87 | 88 | # 7. Get involved in open source 89 | 90 | The open-source community is thriving, so why not get involved? If you need a way to boost your code-reading skills, find an open-source project! 91 | 92 | You can check out the [GitHub Open Source](https://github.com/open-source) community to get started! 93 | 94 | You can even start your own open source project! I founded my own open-source project, [Coding Coach](https://github.com/Coding-Coach/coding-coach), this last September, and it's been an eye-opening experience. 95 | 96 | If you'd like to get involved and learn from some great developers, feel free to check it out! 97 | 98 | # 8. Be comfortable with being uncomfortable 99 | 100 | The tech industry is constantly changing, which means there is always a new skill to be learned. 101 | 102 | While this can be intimidating at first glance, it also provides many opportunities to find a new technology to learn (how could you ever get bored?!). 103 | 104 | The best way to grow in your coding skills is to tackle tasks that scare you. You can do this at work by volunteering to complete a challenging task. But you can also do this in your spare time with new technologies. 105 | 106 | You have to become comfortable with being uncomfortable. You're not expected to have all of the answers. 107 | 108 | # 9. Don't be afraid to ask questions 109 | 110 | Eventually you will hit a problem that you don't know how to solve. Stack Overflow just isn't cutting it! 111 | 112 | It's important to recognize when you need to ask for help. If you have tried to solve a problem, and gone down all viable paths, it's time to reach out for help. 113 | 114 | Asking for help does not make you look weak; this is something that I still struggle with. 115 | 116 | If you're spending hours trying to figure out why your variable is throwing a ReferenceError, ask for help. 117 | 118 | # 10. Surround yourself with people who build you up 119 | 120 | Coding is hard. You will have days where you don't feel cut out to be a Software Engineer. 121 | 122 | Thus, you must surround yourself with people who believe in you. Find a core group of family or friends who build up your self-esteem, and say goodbye to those who don't. 123 | 124 | # 11. Focus on one thing at a time 125 | 126 | Multitasking is the quickest way to ensure mediocrity. Humans cannot effectively multitask. 127 | 128 | Choose one thing to focus on at a time. Learn it, or complete it, to the best of your abilities. Once complete, move on to the next thing. 129 | 130 | Do not try to juggle several topics at once. 131 | 132 | # 12. See the bigger picture - how do all these technologies fit together 133 | 134 | You will be learning many different technologies throughout your coding career. And it can be extremely confusing to determine which technologies solve what task. 135 | 136 | I like to draw diagrams of complex problems. If I'm tasked with building an application, I like to break it down into domains. For example, I know I need HTML, CSS, and JavaScript on the front-end. Perhaps I'll decide to use React as a JS library. And maybe, if I need this application to scale, I'll choose Redux for state management. 137 | 138 | Learn the best use-cases for different technologies. When would you choose one over another? How do they fit together? 139 | 140 | These are important questions you should learn to answer. 141 | 142 | # 13. Find your toolbox - which tools are the best for the job? 143 | 144 | There are no shortage of tools available to developers these days. I can name at least five IDEs off the top of my head that I've worked with in the past. 145 | 146 | The amount of tools available can be extremely overwhelming. Do some research. Determine which tool is right for you. Some questions you might want to ask are: 147 | 148 | - Is this tool being actively maintained? 149 | - Is there a thriving community of developers using it (in the event that you need help)? 150 | - How hard is it to configure? 151 | - Could integrating this tool have negative implications on performance? 152 | - Can I solve the task without the tool? 153 | 154 | Just because a tool exists doesn't mean you need to use it. 155 | 156 | # 14. Maintain a good work/life balance 157 | 158 | You do not need to spend all hours of the day coding. In fact, to do so would be unhealthy. 159 | 160 | You must maintain a healthy work/life balance, or you could suffer the consequences of burnout. 161 | 162 | If you do something from the moment you wake up until the moment you go to sleep at night, you will quickly come to resent it. 163 | 164 | By taking time for yourself, and your other hobbies, you'll maintain a healthy relationship with coding. 165 | 166 | # 15. Learn the basics of design 167 | 168 | If you're building an application that's user-facing, you should know the basics of design. I'm not saying you need to learn how to use Sketch or Adobe Illustrator, but learning the basics of UX Design will positively impact your applications. 169 | 170 | You cannot assume a user will use your application in the same way that you would. In fact, you shouldn't make any assumptions about user behavior at all. 171 | 172 | Understand the reasoning behind certain UI principles in order to determine the best solution for your application. 173 | 174 | For example, it was found that buttons with square edges are actually better for users than buttons with rounded edges, as they contain more pixels. 175 | 176 | Learn these basics, and you can be sure that your web app will shine. 177 | 178 | # 16. Find a mentor 179 | 180 | Finding a mentor is hard, but it's necessary. You can learn invaluable skills from career advice to coding best practices. 181 | 182 | It never hurts to ask someone in the field, whom you admire, to mentor you. The worst thing they can say is no! 183 | 184 | And remember to re-evaluate your mentorship as time progresses, to ensure that it's beneficial to both of you. 185 | 186 | # 17. Build a kick-ass portfolio & resume 187 | 188 | Portfolios and resumes are your first impression to an employer during an interview process. It's imperative to put on your best face. 189 | 190 | Fix spelling and grammatical errors. Ensure that everything is formatted consistently and appropriately. 191 | 192 | If you want more details on writing an awesome resume, feel free to check out my previous [blog post](https://levelup.gitconnected.com/how-to-write-a-stand-out-technical-resume-6cce4721cd8c). 193 | 194 | # 18. Fail fast and fail often 195 | 196 | Failure is subjective. If you make a mistake, learn from it. Don't make the same mistake twice. Just because something "failed" doesn't mean it wasn't valuable. 197 | 198 | The most successful people in history produced vast amounts of work, yet they're only recognized for a few. 199 | 200 | You don't have to code beautiful websites from start to finish for each project you develop. Focus on the underlying technology, and you can worry about making it look nice later. 201 | 202 | # 19. Just keep going 203 | 204 | There will be days you want to give up coding. Don't. It's a difficult career, and everyone suffers with impostor syndrome. 205 | 206 | You are not alone. Coding will get easier over time. 207 | 208 | Take it day-by-day, and you'll be alright. 209 | 210 | Just keep going. 211 | -------------------------------------------------------------------------------- /src/pages/2018-12-25-five-books-which-will-improve-your-career/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: '/five-books-which-will-improve-your-career' 3 | date: '2018-12-25' 4 | title: '5 Books Which Will Improve Your Career ' 5 | author: 'Emma Wedekind' 6 | description: 'I read. A lot. And I love reading books that will positively impact my career. I am the type of person who is motivated by digesting motivational books and podcasts.' 7 | --- 8 | 9 | ![Books](https://images.unsplash.com/photo-1457369804613-52c61a468e7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60) 10 | I read. A lot. And I love reading books that will positively impact my career. I'm the type of person who is motivated by digesting motivational books and podcasts. 11 | 12 | The following five books changed my outlook on not only my career, but my life. They've motivated me to be my best self and achieve my biggest goals. 13 | 14 | If you've read any of the following books, feel free to let me know your thoughts down below! Otherwise, happy reading 🤓📖 15 | 16 | ## 1. Originals: How Non-Conformists Move the World 17 | 18 | **Adam Grant** 19 | ![Originals](https://images.gr-assets.com/books/1445791874l/25614523.jpg) 20 | In Originals, Adam Grant delves into the study of how "originals", or people who are seen as influential in their respective industries, develop their originality. What's the most effective way to create original ideas and share them with the world? Guess you'll have to read the book to find out 😉. 21 | 22 | ## 2. Growth Hacker Marketing: A Primer on the Future of PR, Marketing, and Advertising 23 | 24 | **Ryan Holiday** 25 | ![Growth Hacker Marketing](https://images.gr-assets.com/books/1382075918l/18454317.jpg) 26 | If you're not into reading big books, then this just may be the one for you! Coming in at a whopping 56 pages, Growth Hacker Marketing teaches you the skills you need to effectively market your products, without spending thousands of dollars on marketing. How have notable companies such as Facebook, Evernote, and Airbnb built their empire without traditional methods of marketing? Ryan Holiday spills all their secrets. 27 | 28 | ## 3. The Power of Habit: Why We Do What We Do in Life and Business 29 | 30 | **Charles Duhigg** 31 | ![The Power of Habit](https://images.gr-assets.com/books/1366758683l/12609433.jpg) 32 | 33 | The Power of Habit is one of my favorite books of 2018. Using riveting anecdotes, the author uncovers the secret behind effectively, and permanently, altering habits. What makes a habit? How do you break bad habits and adopt healthy ones? You can leverage the tips from this book to improve your every day life. 34 | 35 | ## 4. Hooked: How to Build Habit-Forming Products 36 | 37 | **Nir Eyal** 38 | ![Hooked](https://images.gr-assets.com/books/1407112405l/22668729.jpg) 39 | Hooked examines the concept behind habit-forming products. What lures customers back for more? Nir Eyal explains his four-step process for developing a habit-forming product that will leave customers wanting more. 40 | 41 | ## 5. Lean UX: Applying Lean Principles to Improve User Experience 42 | 43 | **Jeff Gothelf & Josh Seiden** 44 | ![Lean UX](https://images.gr-assets.com/books/1381355830l/13436116.jpg) 45 | Interaction design is a steadily growing field, and it's nearly impossible to build a successful product without a truly great user experience. Lean UX teaches you how to focus on the design experience rather than the deliverables in order to produce the most effective product. 46 | -------------------------------------------------------------------------------- /src/pages/2018-12-25-five-mistakes-youre-making-in-your-technical-interviews/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: '/five-mistakes-youre-making-in-your-technical-interviews' 3 | date: '2018-12-25' 4 | title: '5 Mistakes You Are Making In Your Technical Interview And How To Avoid Them' 5 | author: 'Emma Wedekind' 6 | description: 'Technical interviews are the most nerve-wracking experiences in any engineers career. Often, you are so worried about impressing the interviewers that you forget to relax and be yourself.' 7 | --- 8 | 9 | ![People at table](https://images.unsplash.com/photo-1536139825125-2026747cd156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60) 10 | 11 | Technical interviews are the most nerve-wracking experiences in any engineer's career. Often, you're so worried about impressing the interviewers that you forget to relax and be yourself. 12 | 13 | So today let's delve into five mistakes you may be making in your interviews, and how to avoid them! 14 | 15 | # 1. You don't ask any questions 16 | 17 | How often have you encountered this scenario: 18 | 19 | _You're sitting in the chair across from your interviewers. They ask you to solve an algorithmic coding question. You have absolutely no idea where to start._ 20 | 21 | This scenario, sadly, is not uncommon; we've all been in this situation. But the biggest mistake you can make is to not ask any questions. 22 | 23 | If you don't thoroughly understand the problem, or you're uncertain if particular limitations exist... ask! 24 | 25 | Most interviewers are rooting for you; they want you to succeed! By asking questions about the problem, you not only show that you're thinking about all aspects of the issue, but you're giving the interviewer a chance to help you. Interviewers will often times provide hints, or help guide you, if you ask the right questions. 26 | 27 | Let's take another scenario: 28 | 29 | _Your interview is wrapping up. You think it went great! The interviewers then ask if you have any questions for them. You say no, and go on your merry way._ 30 | 31 | Never, ever leave an interview without asking the interviewers a question. I typically have one to three questions ready to ask for every interview. 32 | 33 | When you leave an interview without asking any questions, it signals to the interviewers that you're either not invested in this position, or you were so confident that you didn't feel the need to do any research. 34 | 35 | Companies like to see that you've taken time to research them (even if you only spent five minutes Googling.) 36 | 37 | Here are some questions you may want to ask: 38 | 39 | - I saw that your company recently acquired X; how will this impact Y? 40 | - What is the work/life balance? 41 | - What opportunities do you provide for furthering your skill sets and education? i.e. Books, conference allowances, access to online educational platforms. 42 | - What does your typical day look like? 43 | - Why did you choose to work for the company? 44 | - What is your favorite thing about working here? 45 | 46 | # 2. You solve for the most optimized solution first 47 | 48 | Many candidates make the assumption that they have to provide the most optimized, performant solution to an algorithmic coding question. And while this is true, to a certain extent, it doesn't have to be your first solution. 49 | 50 | It is totally fine to start with a brute-force solution, and work your way to an optimized one. 51 | 52 | Let's take an example. 53 | 54 | Let's say you were asked to return the number of pairs of letters in an array. 55 | 56 | Since you have no idea where to begin, let's go ahead and create a brute-force solution. 57 | 58 | ![Coding example 1](https://thepracticaldev.s3.amazonaws.com/i/90c1gt2sxpj6xv3gdv8j.png) 59 | 60 | What is this example doing? 61 | 62 | - We've created an object, called alphabetDictionary which holds each letter of the alphabet, and a number, initialized to 0, which indicates how many times we've encountered this letter in the array. 63 | - Next, we iterate through the length of the array and for each letter, increment the value in the alphabetDictionary. 64 | - Third step is to iterate through the alphabetDictionary and see how many times each letter was found. If the letter was found an even amount of times, divide it by two (to get the correct number of pairs) and add that to the numPairs variable. If the letter was found more than twice, but isn't an even number, subtract one off of the total count (to make it even), then divide by two (to get the number of pairs) and add it to the numPairs variable. 65 | - Then, just return numPairs. 66 | 67 | This is extremely verbose, but it works! Let's see if we can get a more elegant solution. 68 | 69 | Since we don't care which letters were found in pairs, we can initialize alphabetDictionary to an empty object. Thus, we only add a value if the letter was found. 70 | 71 | ![Code example 2](https://thepracticaldev.s3.amazonaws.com/i/fcdbysmq4kp8c46h9ghi.png) 72 | 73 | It's important to note that both of these algorithms have exactly the same runtime O(n), however we were able to make the second snippet a bit more elegant. 74 | 75 | You can use the technique of enhancing your brute-force method to come up with the most optimized coding solution. 76 | 77 | # 3. You work through problems in your head 78 | 79 | When you're deriving a solution for a coding example, it's imperative that you talk through your thought process. The interviewer cannot possibly read your mind; it's up to you to communicate your thoughts. 80 | 81 | Even if you're unsure of the solution, talk through all of the things you do know. What are you missing? 82 | 83 | By talking through these points you're more likely to find a viable solution, and the interviewer gets some insight into how you problem solve. 84 | 85 | The interviewer cares more about your ability to problem solve than they do about you achieving the 100% correct solution. 86 | 87 | # 4. You aren't honest about your experience with certain technologies 88 | 89 | Many candidates, upon reading a job application requesting knowledge of specific technologies or languages, will buff up their technical experience. 90 | 91 | Never list a technology, framework, or language that you could not answer technical interview questions about. 92 | 93 | If an interviewer asks you "Have you worked with React?" and you say "Yes I have", you'd better be able to answer questions about the library. 94 | 95 | There is no quicker way to shoot yourself in the foot than by listing proficiency of a technology you have baseline knowledge of. 96 | 97 | Instead, you're welcome to say "I've taken a few introductory React courses, but haven't worked with it in any professional setting. It's something I truly would like to learn." 98 | 99 | This shows your willingness to learn new skills, while being realistic about your current skillset. Interviewers will appreciate your self-awareness. 100 | 101 | # 5. You prefer to BS your way through a problem than admit you don't know the answer 102 | 103 | If you don't know the answer to a theoretical question, don't BS your way through it. One of the quickest ways you can show your interviewer respect is by being considerate of their time. If you don't know the answer, it's okay to admit it. 104 | 105 | Instead of pretending to know the answer, I like to respond with: "To be honest, I'm not sure, but if I had to make an educated guess, I would say..." This shows the interviewer that you're trustworthy and honest. 106 | 107 | Honesty is always the best policy. 108 | 109 | --- 110 | 111 | Technical interviews don't have to be scary. If you prepare and give it your all, you will succeed. Take each question one by one and don't get overwhelmed. Remember to breathe and start by breaking it down into manageable chunks and you'll be on your way to landing that developer job! 112 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | 4 | const NotFoundPage = () => ( 5 | 6 |

NOT FOUND

7 |

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

8 | 9 | ) 10 | 11 | export default NotFoundPage 12 | -------------------------------------------------------------------------------- /src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | 4 | import womanAtDesk from '../images/woman-at-desk.svg' 5 | import date2015 from '../images/2015.svg' 6 | import date2017 from '../images/2017.svg' 7 | import date2018 from '../images/2018.svg' 8 | 9 | const AboutPage = () => ( 10 | 11 | Woman at desk 12 |

13 | I never wanted to become a Software Engineer. This can be attributed to 14 | the fact that my father is a Software Engineer & Architect and my mother 15 | is a Designer. But I found my passion for engineering during college. 16 |

17 | 2015 18 |

19 | In 2015 I graduated from Siena College in Albany, New York with a B.S. in 20 | Computer Science. I loved my four years in college. I studied abroad at 21 | City University in London my Junior year. I took a service trip to Haiti 22 | my Senior year. And I was manager, and trumpet player, for the Pep Band. 23 |

24 |

25 | The Summer between my Junior and Senior years I completed an internship at 26 | IBM in Poughkeepsie. I worked on WebSphere Application Server and learned 27 | how to automate the installation of WAS on z/OS using Python. I even 28 | managed to squeeze in a win for the IBM intern video competition. 29 |

30 |

31 | After graduating from college I flew down to Austin, Texas to begin my 32 | career at IBM. During the next two years I would help build the UI for the 33 | IBM Spectrum Control and Storage Insights offerings. I worked primarily 34 | with JavaScript, Dojo, HTML, CSS, and a bit of Java when I would 35 | occasionally contribute to the test automation efforts. It was also during 36 | this time that I became the Accessibility Lead where I was responsible for 37 | ensuring W3C Accessibility Compliance for both products. 38 |

39 | 2017 40 |

41 | In October of 2017, I was approached by the VP of IBM Systems and 42 | Transformation. He wanted me to join their design team and help prototype 43 | in code. I got to work on many incredible projects during this time. I 44 | build the Linux on Power Developer Portal using WordPress. I helped 45 | transform the future of Support with the Support Transformation team. But 46 | my biggest accomplishment was IBM Quantum. 47 |

48 |

49 | I single-handedly build the IBM Q Network website using Vue.js. This was a 50 | major accomplishment for me, as I had never used Vue for proprietary code 51 | until this point. The website was a huge success. 52 |

53 |

54 | It was during my time at IBM that I met my current husband. He was a 55 | developer on the same project. The only catch? He lived in Germany. 56 |

57 | 2018 58 |

59 | In February of 2018, I left IBM, sold everything I owned, and flew my two 60 | cats and myself out to Germany. I had secured a job with LogMeIn prior to 61 | making the move, and it wasn’t an easy transition, but it was so worth the 62 | risk. Today I work on GoToMeeting and get to develop using React, Redux, 63 | Typescript and more. 64 |

65 |

66 | In my spare time, I enjoy blogging, reading, and traveling. I’ve read 70 67 | books thus far in 2018 and traveled to 10 countries this year alone. I’m 68 | looking forward to what the future has to offer. 69 |

70 | 71 | ) 72 | 73 | export default AboutPage 74 | -------------------------------------------------------------------------------- /src/pages/blog.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | import { graphql } from 'gatsby' 4 | 5 | import BlogSquare from '../components/blogSquare' 6 | 7 | const BlogPage = ({ data }) => ( 8 | 9 |

18 | More blog posts can be found on{' '} 19 | 26 | Medium 27 | {' '} 28 | and{' '} 29 | 36 | Dev Community 37 | 38 |

39 |
46 | {data.allMarkdownRemark.edges.map(post => ( 47 | 54 | ))} 55 |
56 | 57 | ) 58 | 59 | export const pageQuery = graphql` 60 | query BlogIndexQuery { 61 | allMarkdownRemark { 62 | edges { 63 | node { 64 | id 65 | frontmatter { 66 | path 67 | title 68 | author 69 | date 70 | description 71 | } 72 | } 73 | } 74 | } 75 | } 76 | ` 77 | 78 | export default BlogPage 79 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | 4 | import homeGraphic from '../images/home-graphic.svg' 5 | 6 | const IndexPage = () => ( 7 | 8 | Woman at computer 13 |

14 | Hi, I’m Emma. I’m a Front-end Developer, Designer, & cat mom. 15 |

16 |

17 | I love all things web development & design. I was born and raised in 18 | Upstate New York. After a few years in Austin, Texas I sold everything and 19 | moved to Karlsruhe, Germany. 20 |

21 |

Feel free to send me a message on Twitter!

22 | 23 | ) 24 | 25 | export default IndexPage 26 | -------------------------------------------------------------------------------- /src/pages/resume-templates.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | import ResumeSection from '../components/resumeSection' 4 | 5 | import { StaticQuery, graphql } from 'gatsby' 6 | 7 | const ResumeTemplatesPage = () => ( 8 | ( 26 | 27 |

33 | I love creating fun resume templates in Sketch! If you'd like to use one of my styles, feel free! If you'd like to give me a donation, you can support me on Patreon!

34 | 35 | 36 | 37 | )} 38 | /> 39 | ) 40 | 41 | export default ResumeTemplatesPage 42 | -------------------------------------------------------------------------------- /src/pages/work.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | import WorkItem from '../components/workItem' 4 | 5 | import { StaticQuery, graphql } from 'gatsby' 6 | 7 | const WorkPage = () => ( 8 | ( 47 | 48 | 56 |
57 | 65 |
66 | 74 |
75 |

84 | Design Work 85 |

86 | 94 |
95 | 103 | 104 | )} 105 | /> 106 | ) 107 | 108 | export default WorkPage 109 | 110 | -------------------------------------------------------------------------------- /src/templates/blogPost.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link, graphql } from 'gatsby' 3 | 4 | import Layout from '../components/layout' 5 | 6 | import backArrow from '../images/back-arrow.svg' 7 | 8 | export default function Template({ data }) { 9 | const post = data.markdownRemark 10 | 11 | return ( 12 | 13 | 24 | Go back 29 | Back to blogs 30 | 31 |

36 | {post.frontmatter.title} 37 |

38 |

45 | Posted by {post.frontmatter.author} on {post.frontmatter.date} 46 |

47 |
48 | 49 | ) 50 | } 51 | 52 | export const postQuery = graphql` 53 | query BlogPostByPath($path: String!) { 54 | markdownRemark(frontmatter: { path: { eq: $path } }) { 55 | html 56 | frontmatter { 57 | path 58 | title 59 | author 60 | date 61 | } 62 | } 63 | } 64 | ` 65 | --------------------------------------------------------------------------------